Menampilkan Thumbnail Hanya di Halaman Depan

Menampilkan Thumbnail Hanya di Halaman Depan. Mungkin trik ini sobat sudah pada tau, ya itung2 sharing buat pemula aja, bagaimana cara menampilkan thumbnail gambar hanya pada halaman depan (home page), dan tidak akan tampil pada halaman postingan. Apabila menggunakan platform WordPress istilah ini disebut Featured Image.

Supaya lebih jelas silahkan lihat contoh gambar, pada halaman depan blog saya muncul thumbnail gambar, sedangkan pada halaman postingan akan hilang / tidak ditampilkan.

Langkah ke-1 (Gunakan cara Termudah)

Sebelum melanjutkan ke bawah, silahkan dicoba dulu cara termudah (Baca: Cara Menyembunyikan Gambar Thumbnail di Postingan Blog), kalau tidak berhasil, lanjutkan tutorial di bawah ini.

Langkah ke-2 (Menyimpan kode Kondisional di Template)

1. Login ke Blogger
2. Klik Template > Edit HTML
3. Simpan kode di bawah ini sebelum </head>

<b:if cond='data:view.isPost'>
	<style>
		.thumbnail {display:none}
	</style>
</b:if>

4. Simpan Template

Langkah ke-3 (Saat membuat Postingan)

Pada saat membuat postingan, masuk ke mode HTML kemudian sisipkan kode class="thumbnail" sebelum kode gambar. Penerapannya kurang lebih seperti contoh di bawah

<img class="thumbnail" src="link-gambar-yang-sudah-diupoad" alt="penjelasan gambar" />

Atau tambahkan thumbnail setelah separator, seperti ini :

<div class="separator thumbnail" style="clear: both;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVfSugnnOaC57Zp1hlvfZ2zhBChhMpo_XBbCYsxNqPR-f5naz-RQ4vvRJNcgGiRSU_6Sp561gcFJZmiKu_KDq6-1NAEfdaXOhbf5kUc5XeR1rQoO7cSv1Ik_L3iiZwo9RUZRzs6Z72JeD_O3C-BP9D1IITBv8VJvI-xxglcW0s6ubulpBdW6d0rlCYEa8/s800/webthumb.jpg" 
style="display: block; padding: 1em 0; text-align: center; ">
<img alt="" border="0" width="320" data-original-height="450" data-original-width="800" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVfSugnnOaC57Zp1hlvfZ2zhBChhMpo_XBbCYsxNqPR-f5naz-RQ4vvRJNcgGiRSU_6Sp561gcFJZmiKu_KDq6-1NAEfdaXOhbf5kUc5XeR1rQoO7cSv1Ik_L3iiZwo9RUZRzs6Z72JeD_O3C-BP9D1IITBv8VJvI-xxglcW0s6ubulpBdW6d0rlCYEa8/s320/webthumb.jpg"/>
</a></div>

Apabila masuk mode Compose, gambar itu muncul, akan tetapi setelah di Publish akan disembunyikan pada halaman posting.

Semoga bermanfaat buat sobat !