Cara Menyembunyikan Gambar Thumbnail di Postingan Blog

Cara Menyembunyikan Gambar Thumbnail di Postingan Blog — Penggunaan gambar di postingan blog memang adalah sesuatu yang penting. Melalui gambar yang kita gunakan dalam artikel blog, kita pun bisa mendapatkan traffic pengunjung melalui penelusuran gambar di google.

Namun, adakalanya penggunaan gambar pada postingan blog justru dirasakan malah mengganggu pembaca blog kita. Dilemanya, jika kita tidak menggunakan gambar sama sekali, maka tampilan homepage blog kita akan menjadi jelek karena ketiadaan gambar yang bisa dilihat di homepage. Biasanya, gambar yang pertama kali kita posting di blog akan menjadi gambar yang dilihat pengunjung blog ketika mereka ada di homepage.

Jika kamu memiliki kebingungan dilema yang sama, maka artikel ini menjadi jawaban dari permasalahan itu.

Bagaimana cara membuat tampilan homepage kita tetap memiliki gambar sedangkan di dalam postingan artikel yang kita buat, gambar tersebut tidak muncul? Dengan menggunakan thumbnail gambar.

Agar Gambar Thumbnail Hanya Tampil di Homepage

1. Masuk ke blogger.com
2. Pilih Template/Tema
3. Edit HTML
4. Cari kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
5. Paste kode dibawah ini tepat di atas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<!-- Menyembunyikan Thumbnail --> // Gunakan penanda agar mudah ditemukan kembali 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type='text/css'>
  .thumbnail {display:none}
 </style>
</b:if>

6. Simpan template.

Agar Thumbnail Gambar Tidak Tampil dalam Postingan

1. Upload gambar seperti biasa ke dalam postingan blog.
2. Lihat ke dalam mode penulisan HTML (edit HTML) akan muncul kode gambar seperti dibawah ini:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZXsWvtKpEIY3fs6_piVRFuI9GQxR_fiMSzz2JgWvNfW_Hju64EhbPUG_NqdbC8TD7bFEaXQtpLbGf2sc7kQo2kDmdkt1EagP_Y0CAMzis8hHze3jgurI8v1RYdAUT_3hXVioFSWNjxM/s1600/menyembunyikan+gambar+thumbnail+di+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZXsWvtKpEIY3fs6_piVRFuI9GQxR_fiMSzz2JgWvNfW_Hju64EhbPUG_NqdbC8TD7bFEaXQtpLbGf2sc7kQo2kDmdkt1EagP_Y0CAMzis8hHze3jgurI8v1RYdAUT_3hXVioFSWNjxM/s1600/menyembunyikan+gambar+thumbnail+di+blog.png" data-original-width="250" data-original-height="150" /></a>
</div>

3. Ganti "separator" menjadi "thumbnail", hingga menjadi seperti ini.

<div class="thumbnail" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZXsWvtKpEIY3fs6_piVRFuI9GQxR_fiMSzz2JgWvNfW_Hju64EhbPUG_NqdbC8TD7bFEaXQtpLbGf2sc7kQo2kDmdkt1EagP_Y0CAMzis8hHze3jgurI8v1RYdAUT_3hXVioFSWNjxM/s1600/menyembunyikan+gambar+thumbnail+di+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZXsWvtKpEIY3fs6_piVRFuI9GQxR_fiMSzz2JgWvNfW_Hju64EhbPUG_NqdbC8TD7bFEaXQtpLbGf2sc7kQo2kDmdkt1EagP_Y0CAMzis8hHze3jgurI8v1RYdAUT_3hXVioFSWNjxM/s1600/menyembunyikan+gambar+thumbnail+di+blog.png" data-original-width="250" data-original-height="150" /></a>
</div>

Contoh Penerapan

Hasil penerapannya bisa dilihat dalam gambar pada homepage berikut ini:

Pada homepage, masih bisa dilihat gambar yang saya gunakan, yaitu gambar mata dengan garis silang itu. Akan tetapi pada postingan di sini tidak ada gambar tersebut.

Selamat mencoba.