Cara Menyembunyikan Gambar Thumbnail Post Di Postingan Blog

Cara Menyembunyikan Gambar Thumbnail Post Di Postingan Blog dengan mudah dan benar Thumbnail ini sangat bagus untuk blog agar terlihat lebih profesion
Gambar Cara Menyembunyikan Gambar Thumbnail Post Di Postingan Blog
Cara Menyembunyikan Gambar Thumbnail Blog Di Postingan Blog - Thumbnail blog itu salah satu peran yang penting untuk sebuah blog. Tanpa thumbnail rasanya postingan yang kamu terbitkan seperti ada yang kurang. Bahkan bukan hanya itu saja, thumbnail pada postingan blog juga dapat menarik perhatian lara pengunjung agar mereka bisa melihat semua isi artikel yang ada diblog kamu. 

Pasti hal ini menjadi harapan dan impian semua kalangan blogger kan? Bahkan saya juga ngarep banget tuh bisa dapet visitor puluhan ribu perharinya tapi gak kesampaian terus. Malah curhat... Lanjut! 


Sebenernya thumbnail itu akan otomatis diambil dari gambar pertama yang kamu upload dalam postingan tersebut. Tapi gambar tersebut tetap akan muncul di dalam postingan kamu dan ini akan terlihat jelek. Berbeda kalau kamu pake cara yang saya berikan ini. Kamu bisa atur gambar yang kamu suka untuk dijadikan thumbnail postingan blog kamu. Mau gambarnya diawal ataupun diakhir. Asalkan gambar tersebut diberi elemen pemanggil yaitu class='thumbnail'.

Sehingga gambar tersebut hanya akan muncul pada bagian kulit atau kerangka artikel saja. Jadi gak bakalan muncul dan kelihatan di bagian isi artikel tersebut. Selain itu thumbnail juga akan muncul di samping judul artikel kamu di hasil penulusuran Google saat artikel tersebut terindeks oleh mesin pencari Google dengan sempurna. Jadi bisa kelihatan lebih keren dan elegan. Gimana tertarik gak buat pasang thumbnail diblog?


Cara Menyembunyikan Gambar Thumbnail Di Postingan Blog Dengan Mudah

Pertama-tama kamu login dulu ke akun blogger kamu. Setelah itu masuk ke menu Theme >> Edit HTML lalu cari kode dengan tag penutup </head> (pakai Ctrl + f supaya cepat cari kodenya). Kalau udah ketemu langsung aja taruh kode dibawah ini tepat berada diatas kode </head> tadi. 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.thumbnail {display:none}
</style>
</b:if>

Setelah selesai langsung klik simpan dan kembali ke dasbor blogger kamu lagi. Kalau udah balik lagi, buka postingan yang ingin kamu pasang thumbnail post. Atau bisa juga buat postingan baru dan upload gambar baru. 


Setelah dapat gambar yang ingin dijadikan thumbnail post, pindah ke mode HTML dan ganti tulisan "separator" yang ada di tag gambar <img> tersebut. Kode lengkapnya akan persis dengan kode berikut ini.

<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-WQRcha7bBTM/YKTfRo_Qh2I/AAAAAAAAASg/du6c18jANaoSX72798v-m0EihhFAWxEoQCLcBGAsYHQ/s309/css%2Bminifier.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Gambar Cara Membuat Tools CSS Minifier Keren Dihalaman Statis Blog" border="0" data-original-height="163" data-original-width="309" src="https://1.bp.blogspot.com/-WQRcha7bBTM/YKTfRo_Qh2I/AAAAAAAAASg/du6c18jANaoSX72798v-m0EihhFAWxEoQCLcBGAsYHQ/s16000/css%2Bminifier.jpg" title="Cara Membuat Tools CSS Minifier Keren Dihalaman Statis Blog" /></a></div>

Kamu cukup ganti saja tulisan separator diatas dengan thumbnail. Kalau masih bingung juga bisa lihat contoh yang udah jadinya dibawah ini.

<div class="thumbnail" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-WQRcha7bBTM/YKTfRo_Qh2I/AAAAAAAAASg/du6c18jANaoSX72798v-m0EihhFAWxEoQCLcBGAsYHQ/s309/css%2Bminifier.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Gambar Cara Membuat Tools CSS Minifier Keren Dihalaman Statis Blog" border="0" data-original-height="163" data-original-width="309" src="https://1.bp.blogspot.com/-WQRcha7bBTM/YKTfRo_Qh2I/AAAAAAAAASg/du6c18jANaoSX72798v-m0EihhFAWxEoQCLcBGAsYHQ/s16000/css%2Bminifier.jpg" title="Cara Membuat Tools CSS Minifier Keren Dihalaman Statis Blog" /></a></div>

Setelah itu klik simpan dan lihat perubahannya. Kalau mau lihat perubahannya lihat di halaman utama blog kamu jangan di dalam postingannya. Ilustrasi langsung bisa kamu lihat di homepage blog ini disini.

There are many unique things in the world that you haven't seen

Tulis Komentar

1. Centang kotak "Notify Me" sebelum anda berkomentar.
2. Hindari berkomentar diluar pembahasan artikel diatas.
3. Dilarang memasukan link aktif!
4. Gunakan <i>comment</i> untuk menuliskan kode.
5. Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL.
6. Jika ingin memasukan kode, parse terlebih dahulu (Terutama JavaScript dan HTML).
7. Dilarang mempromosikan produk atau situs apapun di kolom komentar!