Juli 2013

Cara merubah Gambar Berwarna menjadi Hitam Putih ketika disorot kursor dengan CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS</div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiD4kSPGWqDy2HpjVKU2Mh1o-kvPhvI-klv87JSYrDoIIBWhJbMPf95HdxKKN_O5VVpxv5f510cofkFqNLQshLoacUE8mb7VdLOik4VU98LF39Ab1mcGtbbZkD_uXkzcVCo2eTu87qVKcc/s1600/vf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara merubah Gambar Berwarna menjadi Hitam Putih ketika disorot kursor dengan CSS" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiD4kSPGWqDy2HpjVKU2Mh1o-kvPhvI-klv87JSYrDoIIBWhJbMPf95HdxKKN_O5VVpxv5f510cofkFqNLQshLoacUE8mb7VdLOik4VU98LF39Ab1mcGtbbZkD_uXkzcVCo2eTu87qVKcc/s1600/vf.png" title="Cara merubah Gambar Berwarna menjadi Hitam Putih ketika disorot kursor dengan CSS" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
Pada postingan kali ini saya akan membagikan/memberitahukan "<a href="http://blog-masholeh.blogspot.com/2013/07/blog-post.html">Bagaimana Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS</a>".</div>
<div style="text-align: center;">
 </div>
 
<div style="text-align: center;">
Berikut demonstrasi nya :</div>

 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoq1BqCN0opjnMxFVn9Tf9f7CTey12pmbtF2avZvbHQYEtIlnoPazB-hOBMbmpSy641DwUJnUwATjzv67erfIZONs9dkHinpntO7_k-jvhlK2R1yXahQaTEIzTVsGzgVZE0kMuve0hyphenhyphenopM/s1600/8184184552_5701f0419f.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara merubah Gambar Berwarna menjadi Hitam Putih ketika disorot kursor dengan CSS" border="0" class="hitamputih" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoq1BqCN0opjnMxFVn9Tf9f7CTey12pmbtF2avZvbHQYEtIlnoPazB-hOBMbmpSy641DwUJnUwATjzv67erfIZONs9dkHinpntO7_k-jvhlK2R1yXahQaTEIzTVsGzgVZE0kMuve0hyphenhyphenopM/s400/8184184552_5701f0419f.jpg" title="Cara merubah Gambar Berwarna menjadi Hitam Putih ketika disorot kursor dengan CSS" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
1. Simpan Kode dibawah ini tepat di atas kode </head> pada halaman EDIT HTML : 
 
<blockquote style="background-color: #eeeeee; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 8px; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 1.2em; height: 350px; line-height: 1.3em; margin: 10px 0px; max-height: 350px; min-height: 50px; overflow: auto; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 682px; word-wrap: break-word;"><code class="xml" style="background-color: #f0f0f0; background-position: initial initial; background-repeat: initial initial; color: black; display: block; padding: 0.5em;">
<style type="text/css">
.hitamputih { filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
 -webkit-filter: grayscale(1); /* Google Chrome  Safari 6+ */
 filter: gray; /* IE6-9 */ }
.hitamputih:hover {filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale")}
</style></code></pre>
</blockquote>
 
2. Berikut contoh untuk memanggil kode CSS di atas : 
 
<blockquote style="background-color: #eeeeee; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 8px; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 1.2em; height: 134.375px; line-height: 1.3em; margin: 10px 0px; max-height: 350px; min-height: 50px; overflow: auto; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 699px; word-wrap: break-word;"><code class="xml" style="background-color: #f0f0f0; background-position: initial initial; background-repeat: initial initial; color: black; display: block; padding: 0.5em;">
<img class="hitamputih" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv7mLrvqlmRtkq4OA92RIY55Tk6luNPVq0REuLGDMw4le-hqM_OY2aZwF-CWq8rxZs3rCg2VtTbzkNdDxjup1OWe42UzpxLWK-1zmmXOJuaLg8mnWV77fhzxArwwjjZCtyNPXYphktlsM/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg"/></code></pre>
</blockquote>
 
# Jika anda ingin membuat semua gambar yang ada di blog anda secara otomatis menjadi hitam putih / (grayscale) dan menjadi berwarna ketika di sentuh!.. silahkan Tempel kode dibawah ini sebelum kode ]]></b:skin> pada Edit HTML :  
<blockquote style="background-color: #eeeeee; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 8px; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 1.2em; height: 350px; line-height: 1.3em; margin: 10px 0px; max-height: 350px; min-height: 50px; overflow: auto; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 682px; word-wrap: break-word;"><code class="xml" style="background-color: #f0f0f0; background-position: initial initial; background-repeat: initial initial; color: black; display: block; padding: 0.5em;">
.post img, .sidebar img{
 filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
 -webkit-filter: grayscale(1); /* Google Chrome Safari 6+ */
 filter: gray; /* IE6-9 */
 }

.post img:hover, .sidebar img:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
</code></pre>
</blockquote>
 
Semoga Tutorial <a href="http://blog-masholeh.blogspot.com/2013/07/blog-post.html">Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS</a> ini bermanfaat .. terima kasih ! 
 
#jika ada pertanyaan tentang <a href="http://www.blogger.com/">Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS</a> silahkan tinggalkan komentar !</div>

Cara merubah Gambar Berwarna menjadi Hitam Putih ketika disorot kursor dengan CSS

Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS Pada postingan kali ini saya akan membagikan/memberitahukan "...

Baca selengkapnya »

03.26 +

Cara Menghilangkan Link Aktif pada Komentar

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="hitamputih">
<div dir="ltr" style="text-align: left;" trbidi="on">
Menghilangkan Link Aktif pada Komentar - Terkadang kita sering dipusingkan dengan banyaknya spmmer pada komentar, dengan menyimpan link aktif /hidup. Kebanyakan dari mereka komentarnya tidak bermutu, dan hanya mengharapkan backlink. Tentunya kita harus mengambil cara agar para spammer tidak seenaknya menyimpan tautan aktif pada komentar. 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEXk_bujOHDa6XB5QgQLIRnoBWvLd2P8lsWQ2DdhZSWu2KskuViX1UBLwllOB6p-hfmiN5lGCIMMTR34JhgTDZTV9BVJPBgXQSHhCeCTPEvLx_zaUMZkkHMQrBXsOHBzLCRbJiij9qrzcF/s1600/d4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Menghilangkan Link Aktif pada Komentar" border="0" height="95" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEXk_bujOHDa6XB5QgQLIRnoBWvLd2P8lsWQ2DdhZSWu2KskuViX1UBLwllOB6p-hfmiN5lGCIMMTR34JhgTDZTV9BVJPBgXQSHhCeCTPEvLx_zaUMZkkHMQrBXsOHBzLCRbJiij9qrzcF/s400/d4.png" title="Cara Menghilangkan Link Aktif pada Komentar" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Contoh penulisan link aktif pada form komentar</td></tr>
</tbody></table>
 
Ada beberapa cara untuk menghilangkan link aktif / link hidup pada komentar, diantaranya dengan CSS dan JavaScript. 
 
 
<h3 style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9CSlrl75EwX3DcfL68AeM85EsrHwDYb3FRicJR2fkLC6Tihh5_u5bCi_PqtKvWXVVjuytfbpYKZ_Bpie0mOyTS5Zi-OOIyBvolK-2RdOSCiwHALPODijhd-vTAplSpFJ4Rx30IqQyB4/s1600/bottom-line.gif); background-position: 0% 100%; background-repeat: no-repeat no-repeat; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 26px; font-weight: 400; line-height: 28.796875px; margin: 0px; padding-bottom: 12px;">
Dengan CSS (Not Recommended)</h3>
 
Untuk menyembunyikan link dengan CSS, simpan kode ini di atas <code style="background-color: white; color: #2a5ead; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.6px; line-height: 28.796875px;">]]></b:skin></code> 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(29, 179, 140); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.6px; line-height: 1.5em; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="css" style="color: #333333; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.6px; padding: 0px !important;">#comments p a{ display: none !important;}</code></pre>
Akan tetapi cara ini tidak direkomendasikan, karena masih terbaca di browser, otomatis masih terbaca sebagai link oleh Mesin Pencari. 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-bmLknow1w9XEkqqUXeqA1Ciqpxike3M6VYkaLIxFiN65ipLeUUr7lyWuNjHikdZDCF8MQZlwJus7eli3QvpaKzRQzM6Qj60bHchO5BuydtLNGlUsZ5I5tx0yH_p6C487F28OAt7zeKM/s1600/d3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Menghilangkan Link Aktif pada Komentar" border="0" height="329" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-bmLknow1w9XEkqqUXeqA1Ciqpxike3M6VYkaLIxFiN65ipLeUUr7lyWuNjHikdZDCF8MQZlwJus7eli3QvpaKzRQzM6Qj60bHchO5BuydtLNGlUsZ5I5tx0yH_p6C487F28OAt7zeKM/s640/d3.png" title="Cara Menghilangkan Link Aktif pada Komentar" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Link masih terbaca oleh browser</td></tr>
</tbody></table>
 
 
<h3 style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9CSlrl75EwX3DcfL68AeM85EsrHwDYb3FRicJR2fkLC6Tihh5_u5bCi_PqtKvWXVVjuytfbpYKZ_Bpie0mOyTS5Zi-OOIyBvolK-2RdOSCiwHALPODijhd-vTAplSpFJ4Rx30IqQyB4/s1600/bottom-line.gif); background-position: 0% 100%; background-repeat: no-repeat no-repeat; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 26px; font-weight: 400; line-height: 28.796875px; margin: 0px; padding-bottom: 12px;">
Dengan JavaScript (Recommended)</h3>
 
Sebetulnya ada banyak javaScript untuk menghilangkan link hidup pada komentar ini, namun pada kesempatan ini saya akan share 2 JavaScript saja. 
 
Simpan salah satu JavaScript ini di atas <code style="background-color: white; color: #2a5ead; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.6px; line-height: 28.796875px;"></body></code> 
 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(29, 179, 140); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.6px; line-height: 1.5em; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="color: #333333; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.6px; padding: 0px !important;"><script type='text/javascript'>
//<![CDATA[
$(function(){$('#comments p').find('a').contents().unwrap();});
//]]>
</script></code></pre>
Hasilnya akan menjadi seperti ini 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmQ1RDkjriEHdGqA8kfQveXfh8ScOa3fDPQVA122UWsFnVVb0kw9gDvCUZUd4-oTkRzUOG5HOjMEQvy38_jbhCDrqN0YO4jPDatXpwutPnWyIzPdv06NxB6JuHdMQR1IfTLyiwXKyR0S_c/s1600/d2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Menghilangkan Link Aktif pada Komentar" border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmQ1RDkjriEHdGqA8kfQveXfh8ScOa3fDPQVA122UWsFnVVb0kw9gDvCUZUd4-oTkRzUOG5HOjMEQvy38_jbhCDrqN0YO4jPDatXpwutPnWyIzPdv06NxB6JuHdMQR1IfTLyiwXKyR0S_c/s400/d2.png" title="Cara Menghilangkan Link Aktif pada Komentar" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Anchor link akan menjadi teks biasa</td></tr>
</tbody></table>
 
atau gunakan JavaScript ini 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(29, 179, 140); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.6px; line-height: 1.5em; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="color: #333333; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.6px; padding: 0px !important;"><script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
 var parent = document.getElementById(parentID),
 content = parent.getElementsByTagName(children);
 for (var i = 0; i < content.length; i++) {
 if (content[i].innerHTML.indexOf('</a>') !== -1) {
 content[i].innerHTML = "No live link!!! Woles Broo!";
 content[i].className = "spammer-detected";
 }
 }
} 
blockLinks('comment-holder', 'p');
//]]>
</script></code></pre>
 
 Hasilnya akan seperti ini 
 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFr-UsuAVAeK8-EOdG7BtGXmJV-Qp9P-PHkrWEp-SJnA8miHHU1vNDIs5j4k8GN4g7shoaZyXTCAF3K0srP5bu7heyrAw8q-lv2xmDjqV2rkpQmhdpFDgxhG8imGE2U3kwpSb3VRU2gXbM/s1600/d1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Menghilangkan Link Aktif pada Komentar" border="0" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFr-UsuAVAeK8-EOdG7BtGXmJV-Qp9P-PHkrWEp-SJnA8miHHU1vNDIs5j4k8GN4g7shoaZyXTCAF3K0srP5bu7heyrAw8q-lv2xmDjqV2rkpQmhdpFDgxhG8imGE2U3kwpSb3VRU2gXbM/s400/d1.png" title="Cara Menghilangkan Link Aktif pada Komentar" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Isi komentar semua berubah menjadi peringatan</td></tr>
</tbody></table>
 
Semoga bermanfaat... 
 
Source 
http://blog.kangismet.net/2013/05/menghilangkan-link-aktif-pada-komentar.html</div>
</div>
</div>

Menghilangkan Link Aktif pada Komentar - Terkadang kita sering dipusingkan dengan banyaknya spmmer pada komentar, dengan menyimpan link ...

Baca selengkapnya »

07.34 +

Cara Menyembunyikan Label, Author dan Jumlah Komentar pada Halaman Statis

<div class="hitamputih"><div dir="ltr" style="text-align: left;" trbidi="on">Menyembunyikan Label, Author dan Jumlah Komentar pada Halaman Statis - Halaman statis atau Static Page biasanya digunakan untuk menyimpan dokumen About, Daftar Isi, Contact dll. Pada halaman statis biasanyatidak dimunculkan Label, Author, Tanggal postingan dan jumlah komentar. Akan tetapi beberapa template mungkin saja pada halaman statis ini memunculkan Label, Author dsb. 
 
Bagi sobat yang belum faham, saya akan jelaskan step by step cara penggunaannya. Disini saya akan menjelaskan dengan inspect element atau memeriksa elemen, selanjutnya penggunaan tag kondisionalnya. 
 
<h3 style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9CSlrl75EwX3DcfL68AeM85EsrHwDYb3FRicJR2fkLC6Tihh5_u5bCi_PqtKvWXVVjuytfbpYKZ_Bpie0mOyTS5Zi-OOIyBvolK-2RdOSCiwHALPODijhd-vTAplSpFJ4Rx30IqQyB4/s1600/bottom-line.gif); background-position: 0% 100%; background-repeat: no-repeat no-repeat; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 26px; font-weight: 400; line-height: 28.796875px; margin: 0px; padding-bottom: 12px;">Inspect Element pada Static Page</h3> Untuk mengetahui elemen atau objek mana yang akan disembunyikan, buka salah satu halaman statis di blog sobat, kemudian lakukan langkah-langkah ini : 
 1. Blok pada Label/Author/Komentar 
2. Klik kanan pada blok tersebut. 
3. Klik Periksa Elemen / Inspect Element. 
 
<div style="background-color: white; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 16px; line-height: 28.796875px; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcNKx-RkqsHgbAnhlok6EINSkjAb6cg9lzeInSIEPWYEH9HG6h9c0mNpxXPMcwWwloHdR0snTrcAQgjmwCQUfJn4yJpP1L7lfkilQCd3Gp9HZV9AdkPP7lmsd45AGGqW15yZhBak_rPtK3/s1600/c1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Menyembunyikan Label, Author dan Jumlah Komentar pada Halaman Statis" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcNKx-RkqsHgbAnhlok6EINSkjAb6cg9lzeInSIEPWYEH9HG6h9c0mNpxXPMcwWwloHdR0snTrcAQgjmwCQUfJn4yJpP1L7lfkilQCd3Gp9HZV9AdkPP7lmsd45AGGqW15yZhBak_rPtK3/s1600/c1.png" title="Cara Menyembunyikan Label, Author dan Jumlah Komentar pada Halaman Statis" /></a></div> Setelah itu akan muncul kurang lebih seperti ini (saya menggunakan browser Google Chrome) 
 
<div style="background-color: white; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 16px; line-height: 28.796875px; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTwUl2jHWR3MKlN6Qt2sonR2QThRs7eeLfyXEb_RyXOisQXQ5HD0pWxpy1nhfQa5G2VLHRaDbqCoozKk6EAxQKei-zreO25BBJ6gmZHdLVsLu4Oh_gA5qFibzgb6V6_WdsrBwBby2q0uAT/s1600/c2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Menyembunyikan Label, Author dan Jumlah Komentar pada Halaman Statis" border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTwUl2jHWR3MKlN6Qt2sonR2QThRs7eeLfyXEb_RyXOisQXQ5HD0pWxpy1nhfQa5G2VLHRaDbqCoozKk6EAxQKei-zreO25BBJ6gmZHdLVsLu4Oh_gA5qFibzgb6V6_WdsrBwBby2q0uAT/s640/c2.png" title="Cara Menyembunyikan Label, Author dan Jumlah Komentar pada Halaman Statis" width="640" /></a></div> Perhatikan pada gambar, pindahkan mouse satu persatu pada blok HTML, lihat ke atas, apabila sudah terblok semua, berarti elemen itulah yang kita cari. 
 Pada gambar di atas kita menemukan <code style="background-color: white; color: #2a5ead; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.6px; line-height: 28.796875px;"><div class="postmeta"></code> dan pada CSSnya <code style="background-color: white; color: #2a5ead; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.6px; line-height: 28.796875px;">.postmeta</code>. Setelah mendapatkan markup HTML dan CSSnya, langkah selanjutnya adalah menyembunyikan elemen tersebut dengan Tag kondisional. 
 
<h3 style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9CSlrl75EwX3DcfL68AeM85EsrHwDYb3FRicJR2fkLC6Tihh5_u5bCi_PqtKvWXVVjuytfbpYKZ_Bpie0mOyTS5Zi-OOIyBvolK-2RdOSCiwHALPODijhd-vTAplSpFJ4Rx30IqQyB4/s1600/bottom-line.gif); background-position: 0% 100%; background-repeat: no-repeat no-repeat; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 26px; font-weight: 400; line-height: 28.796875px; margin: 0px; padding-bottom: 12px;">Menyembunyikan Elemen dengan Tag Kondisional.</h3> Tugas saat ini adalah menyembunyikan <code style="background-color: white; color: #2a5ead; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.6px; line-height: 28.796875px;">.postmeta</code> dari halaman statis. Maka sisipkan code display:none pada css. 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(29, 179, 140); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.6px; line-height: 1.5em; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="color: #333333; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.6px; padding: 0px !important;">.postmeta{display:none}</code></pre> 
 
Contoh cara menyisipkan display:none pada css 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(29, 179, 140); border-style: solid; border-width: 1px 1px 1px 3px; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0.5em 1em; position: relative; word-wrap: break-word;">.postmeta{display:none;font:11px Oswald;text-transform:uppercase;font-weight:normal;padding:5px 0;line-height:16px;color:#aaa}</pre><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfK3SGyJaY8_QKu42hoVsrlvlOF585FPEWPxEw74FTLTfpEOJEaoo6bJsEo77SqJDCVXKy4XXAFqzmgYPNefauvVY-rZcJwm3_x0xBEXRjhHnE9f1bzzyXPBYH49uI6nJC6kKX4sHPy0c-/s1600/c3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Menyembunyikan Label, Author dan Jumlah Komentar pada Halaman Statis" border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfK3SGyJaY8_QKu42hoVsrlvlOF585FPEWPxEw74FTLTfpEOJEaoo6bJsEo77SqJDCVXKy4XXAFqzmgYPNefauvVY-rZcJwm3_x0xBEXRjhHnE9f1bzzyXPBYH49uI6nJC6kKX4sHPy0c-/s640/c3.png" title="Cara Menyembunyikan Label, Author dan Jumlah Komentar pada Halaman Statis" width="640" /></a></div> 
 
 Silahkan dipelajari sendiri caranya  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEind_w7sW5dCzGLmwBGoTeiPt0icikTYLjuqXuXFEwXfFGNQdELFrx3n7WM_a_HAtwLVFbFGO0QjrJq_ub8QQayzYmdDi2-LD_4GSE8zlkgpJK9EQ8b80o7KdPyQb7kYVbUZitxqCoHZO8/s1600/smile1.gif" imageanchor="1" style="margin-bottom: 3px; margin-right: 10px;"><img alt="smile" border="0" class="ki-smiley" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEind_w7sW5dCzGLmwBGoTeiPt0icikTYLjuqXuXFEwXfFGNQdELFrx3n7WM_a_HAtwLVFbFGO0QjrJq_ub8QQayzYmdDi2-LD_4GSE8zlkgpJK9EQ8b80o7KdPyQb7kYVbUZitxqCoHZO8/s1600/smile1.gif" style="-webkit-box-shadow: none; background-color: white; border: 0px !important; box-shadow: none; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 16px; height: auto !important; line-height: 28.796875px; max-width: 100%; padding: 0px; page-break-after: always; vertical-align: middle !important; width: auto !important;" /></a> 
Semoga Berhasil............ Good Luck <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEind_w7sW5dCzGLmwBGoTeiPt0icikTYLjuqXuXFEwXfFGNQdELFrx3n7WM_a_HAtwLVFbFGO0QjrJq_ub8QQayzYmdDi2-LD_4GSE8zlkgpJK9EQ8b80o7KdPyQb7kYVbUZitxqCoHZO8/s1600/smile1.gif" imageanchor="1" style="margin-bottom: 3px; margin-right: 10px;"><img alt="smile" border="0" class="ki-smiley" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEind_w7sW5dCzGLmwBGoTeiPt0icikTYLjuqXuXFEwXfFGNQdELFrx3n7WM_a_HAtwLVFbFGO0QjrJq_ub8QQayzYmdDi2-LD_4GSE8zlkgpJK9EQ8b80o7KdPyQb7kYVbUZitxqCoHZO8/s1600/smile1.gif" style="-webkit-box-shadow: none; background-color: white; border: 0px !important; box-shadow: none; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 16px; height: auto !important; line-height: 28.796875px; max-width: 100%; padding: 0px; page-break-after: always; vertical-align: middle !important; width: auto !important;" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEind_w7sW5dCzGLmwBGoTeiPt0icikTYLjuqXuXFEwXfFGNQdELFrx3n7WM_a_HAtwLVFbFGO0QjrJq_ub8QQayzYmdDi2-LD_4GSE8zlkgpJK9EQ8b80o7KdPyQb7kYVbUZitxqCoHZO8/s1600/smile1.gif" imageanchor="1" style="margin-bottom: 3px; margin-right: 10px;"><img alt="smile" border="0" class="ki-smiley" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEind_w7sW5dCzGLmwBGoTeiPt0icikTYLjuqXuXFEwXfFGNQdELFrx3n7WM_a_HAtwLVFbFGO0QjrJq_ub8QQayzYmdDi2-LD_4GSE8zlkgpJK9EQ8b80o7KdPyQb7kYVbUZitxqCoHZO8/s1600/smile1.gif" style="-webkit-box-shadow: none; background-color: white; border: 0px !important; box-shadow: none; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 16px; height: auto !important; line-height: 28.796875px; max-width: 100%; padding: 0px; page-break-after: always; vertical-align: middle !important; width: auto !important;" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEind_w7sW5dCzGLmwBGoTeiPt0icikTYLjuqXuXFEwXfFGNQdELFrx3n7WM_a_HAtwLVFbFGO0QjrJq_ub8QQayzYmdDi2-LD_4GSE8zlkgpJK9EQ8b80o7KdPyQb7kYVbUZitxqCoHZO8/s1600/smile1.gif" imageanchor="1" style="margin-bottom: 3px; margin-right: 10px;"><img alt="smile" border="0" class="ki-smiley" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEind_w7sW5dCzGLmwBGoTeiPt0icikTYLjuqXuXFEwXfFGNQdELFrx3n7WM_a_HAtwLVFbFGO0QjrJq_ub8QQayzYmdDi2-LD_4GSE8zlkgpJK9EQ8b80o7KdPyQb7kYVbUZitxqCoHZO8/s1600/smile1.gif" style="-webkit-box-shadow: none; background-color: white; border: 0px !important; box-shadow: none; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 16px; height: auto !important; line-height: 28.796875px; max-width: 100%; padding: 0px; page-break-after: always; vertical-align: middle !important; width: auto !important;" /></a></div></div>

Menyembunyikan Label, Author dan Jumlah Komentar pada Halaman Statis - Halaman statis atau Static Page biasanya digunakan untuk menyimpan d...

Baca selengkapnya »

22.34 +

Cara memasang emoticon pada komentar blogspot

<div class="hitamputih"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;">cara memasang emoticon pada komentar blogspot</div><div class="separator" style="clear: both; text-align: center;"> 
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Nd-nDcIbKgiDvyrOtcIPffvzPzP6eHGfdmsIKPwYj0XwETXVrabmrHXxPL85pSS26W-ysJdFsnv_T01iYydbwGAR3zWgqbKbyXh0Nnmb6oYIMj6ur0FPrlxKQoBTb_Fn5jkzLOomCAKs/s1600/komen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara memasang emoticon pada komentar blogspot" border="0" class="hitamputih" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Nd-nDcIbKgiDvyrOtcIPffvzPzP6eHGfdmsIKPwYj0XwETXVrabmrHXxPL85pSS26W-ysJdFsnv_T01iYydbwGAR3zWgqbKbyXh0Nnmb6oYIMj6ur0FPrlxKQoBTb_Fn5jkzLOomCAKs/s320/komen.png" title="cara memasang emoticon pada komentar blogspot" width="320" /></a></div> 
 Masholeh || kali ini saya akan share tentang Bagaimana cara memasang emoticon pada komentar blogspot silahkan disimak baik baik ............. CEKIDOT 
Emoticon yang merupakan gabungan kata dari "emotion" dan "icon" yang berarti icon yang digunakan untuk mengekspresikan emosi sebuah pernyataan tertulis, dan bisa mengubah serta meningkatkan interpretasi terhadap tulisan tersebut. Jika anda melihat template-template yang saya buat, saya sering menambahkan manipulasi seperti ini. Mungkin ada yang penasaran bagaimana cara memasang emoticon seperti itu. Nah kali ini saya akan membagikan cara memasang emoticon seperti pada template yang saya buat. 
<h2 style="border-bottom-color: rgb(179, 179, 179); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(179, 179, 179); border-top-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 19px; font-weight: normal; line-height: 1.4em; list-style: none; margin: 8px -12px; outline: none; padding: 2px 10px; text-shadow: rgb(165, 165, 165) 0px 1px 1px;">Cara Pemasangan di Blogspot</h2><ol style="box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; padding: 0px 0px 0px 30px;"><li style="border: none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">Masuk ke halaman editor HTML</li>
<li style="border: none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">Salin kode di bawah ini, kemudian letakkan tepat sebelum/di atas kode </head><pre class="numbered" data-codetype="CSS+HTML+JQuery" style="border-left-color: rgb(181, 137, 0); border-left-style: solid; border-left-width: 2px; box-sizing: border-box; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; line-height: 15px; overflow: auto; padding: 5px 0.5em 5px 1em; position: relative; word-wrap: normal;" title="Double Click untuk mengcopy"><span class="line-number" style="background-color: #f6f6f6; border-right-color: rgb(119, 17, 17); border-right-width: 2px; border-style: none solid none none; box-sizing: border-box; color: #586e75; display: block; float: left; line-height: 16px; list-style: none; margin: 0px 1em 0px -1em; min-width: 35px; outline: none; padding: 0px; text-align: right;"><a href="http://mkr-site.blogspot.com/2013/02/emoticon-pada-komentar-blogspot.html#line-1-1" style="-webkit-transition: all 0.4s ease-in-out; background-color: white; border: none; box-sizing: border-box; color: #9f4949; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out;">1</a><a href="http://mkr-site.blogspot.com/2013/02/emoticon-pada-komentar-blogspot.html#line-1-2" style="-webkit-transition: all 0.4s ease-in-out; background-color: white; border: none; box-sizing: border-box; color: #9f4949; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out;">2</a><code class="xml" style="box-sizing: border-box; color: #111111; display: block; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; letter-spacing: 0px; line-height: 16px;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://ivyth.googlecode.com/svn/js/emoticon.min.js" type="text/javascript"></script></code></pre> NB:Karena manipulasi ini menggunakan jQuery maka setidaknya ditemplate anda harus ada jQuery library [line-1]. Jika sudah ada jQuery library di template anda maka code pada line-1 jangan dicopy.</li>
<li style="border: none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">Salin kode di bawah ini, kemudian letakkan tepat sebelum/di atas kode </body><pre data-codetype="CSS+HTML+JQuery" style="border-left-color: rgb(181, 137, 0); border-left-style: solid; border-left-width: 4px; box-sizing: border-box; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; line-height: 15px; overflow: auto; padding: 5px 0.5em 5px 1em; position: relative; word-wrap: normal;" title="Double Click untuk mengcopy"><code class="xml" style="box-sizing: border-box; color: #111111; display: block; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; letter-spacing: 0px;"><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script>
</b:if></code></pre></li>
<li style="border: none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">Jika sudah selesai, klik Simpan Template dan lihat hasilnya</li>
</ol><div class="notemkr" style="box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;">Ingat sebelum memasang/melakukan pengeditan pada template sebaiknya dibackup terlebih dahulu.</div><h3 style="background-color: #f0f0f0; border-bottom-color: rgb(221, 221, 221); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(221, 221, 221); border-top-width: 1px; box-sizing: border-box; color: #3a3a3a; font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; line-height: 19.1875px; list-style: none; margin: 5px -12px; outline: none; padding: 5px 10px;">Keterangan-Keterangan</h3><div class="boxtable" style="background-color: #fcfcfc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(190, 14, 14); box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; overflow: hidden;"><div class="hdtable isinya" style="background-color: #bd1717; border-bottom-color: rgb(201, 66, 66); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: white; overflow: hidden; padding: 5px 10px;"><div class="leftx" style="box-sizing: border-box; float: left; padding-right: 8px; width: 186.046875px;">Opsi</div><div class="rightx" style="box-sizing: border-box; float: left; width: 434.125px;">Keterangan</div></div><div class="cnttable isinya" style="background-color: #f1f1f1; border-bottom-color: rgb(201, 66, 66); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; overflow: hidden; padding: 5px 10px;"><div class="leftx" style="box-sizing: border-box; float: left; padding-right: 8px; width: 186.046875px;">emoRange</div><div class="rightx" style="box-sizing: border-box; float: left; width: 434.125px;">Tempat dimana gambar emoticon mau dimunculkan.</div></div><div class="cnttable isinya" style="border-bottom-color: rgb(201, 66, 66); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; overflow: hidden; padding: 5px 10px;"><div class="leftx" style="box-sizing: border-box; float: left; padding-right: 8px; width: 186.046875px;">putEmoAbove</div><div class="rightx" style="box-sizing: border-box; float: left; width: 434.125px;">Tempat dimana gambar sampel emoticon akan diletakkan.</div></div><div class="cnttable isinya" style="background-color: #f1f1f1; border-bottom-color: rgb(201, 66, 66); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; overflow: hidden; padding: 5px 10px;"><div class="leftx" style="box-sizing: border-box; float: left; padding-right: 8px; width: 186.046875px;">topText</div><div class="rightx" style="box-sizing: border-box; float: left; width: 434.125px;">Tulisan tebal/bold dibawah gambar sample emoticon</div></div><div class="cnttable isinya" style="border-bottom-color: rgb(201, 66, 66); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; overflow: hidden; padding: 5px 10px;"><div class="leftx" style="box-sizing: border-box; float: left; padding-right: 8px; width: 186.046875px;">emoMessage</div><div class="rightx" style="box-sizing: border-box; float: left; width: 434.125px;">Pesan pada saat kotak peringatan/alert dan tulisan dibawah tulisan tebal dibawah gambar sample .</div></div></div> #jika ada pertanyaan mengenai bagaimana cara memasang emoticon pada komentar blogspot silahkan berkomentar !</div></div>

cara memasang emoticon pada komentar blogspot Masholeh || kali ini saya akan share tentang Bagaimana cara memasang emoticon pada komenta...

Baca selengkapnya »

09.16 +

Cara Merubah Gambar Anonim Komentar di Blogger dengan CSS

<div class="hitamputih"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;">Cara Merubah Gambar Anonim Komentar di Blogger dengan CSS</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ8bcmkE7_1XhIwtHieX2FOGUTV4FYzSQyq4i4k9gh4lH73eaT3FL01j_wN_BMC4wdtQ1BKKTN_gyuiVV8FQE4eEnxixJDADYWKze3awtqcXTbOxyQpwwFM3NX2LpEsRgqtEvFOijWekWX/s1600/vc.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ8bcmkE7_1XhIwtHieX2FOGUTV4FYzSQyq4i4k9gh4lH73eaT3FL01j_wN_BMC4wdtQ1BKKTN_gyuiVV8FQE4eEnxixJDADYWKze3awtqcXTbOxyQpwwFM3NX2LpEsRgqtEvFOijWekWX/s320/vc.png" width="320" /></a></div> 
 
 Masholeh || kali ini saya akan membahas tentang Bagaimana Cara Merubah Gambar Anonim Komentar di Blogger dengan CSS ? , <span style="background-color: white; border: none; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; list-style: none; margin: 0px; outline: none; padding: 0px;">Kalian mungkin sering melihat gambar Anonim/Anonymous dari komentar blogspot yang menampilkan gambar orang yang berwarna abu-abu. Nah gambar itu dapat dimanipulasi dengan berbagi cara. Diantaranya dengan Javascript atau dengan jQuery. Tapi yang kali ini yang saya bagikan yaitu hanya dengan CSS. 
 Yah Manipulasi itu ternyata dapat dilakukan hanya dengan CSS khususnya CSS3 atribut selector. Intinya dengan menggunakan CSS3 attribute selector kita akan menentukan attribute src yang mengandung link dari gambar anonim kemudian menggantinya dengan gambar yang kita hendaki. Link dari gambar anonim dari blogger pada umumnya seperti ini http://img1.blogblog.com/img/anon36.png. Nah itulah nantinya yang akan kita rubah. Berikut ini adalah CSS yang digunakan. 
<pre data-codetype="CSS" style="-webkit-transition: all 0.4s ease-in-out; background-color: #e9dddd; border-left-color: rgb(93, 160, 40); border-left-style: solid; border-left-width: 4px; box-sizing: border-box; color: #333333; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; overflow: auto; padding: 5px 0.5em 5px 1em; position: relative; transition: all 0.4s ease-in-out; word-wrap: normal;"><code class="css" style="box-sizing: border-box; color: #111111; display: block; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; letter-spacing: 0px;">.comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {
content: url(http://4.bp.blogspot.com/-AEWksK942OE/UFiyLzXJhiI/AAAAAAAAFKE/jBegaGPClxI/s70/user-anonymous-icon.png);
}</code></pre> Yah hanya satu CSS yang digunakan. 
 
<span style="background-color: white; border: none; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; list-style: none; margin: 0px; outline: none; padding: 0px;">Karena menggunakan css attribute selector yang specifik maka cara diatas juga bisa digunakan selain gambar anonim. Nahh.... Jika ingin mengganti gambarnya silahkan ganti link gambar yang berwarna putih sesuai yang anda inginkan.  
 
#jika ada pertanyaan silahkan tinggalkan komentar !</div></div>

Cara Merubah Gambar Anonim Komentar di Blogger dengan CSS Masholeh || kali ini saya akan membahas tentang Bagaimana Cara Merubah Gamba...

Baca selengkapnya »

09.05 +

Blogger

CSS

Javascript

Cara merubah Gambar Berwarna menjadi Hitam Putih ketika disorot kursor dengan CSS

Cara Menghilangkan Link Aktif pada Komentar

Cara Menyembunyikan Label, Author dan Jumlah Komentar pada Halaman Statis

Cara memasang emoticon pada komentar blogspot

Cara Merubah Gambar Anonim Komentar di Blogger dengan CSS

Entri Populer

Arsip Blog