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.
Sebelum melanjutkan ke cara menampilkan thumbnail hanya pada halaman depan, pastikan gambar sudah diupload ke Blogger. Bagi yang belum tau caranya (Baca: Cara Menyimpan Gambar di Blogger)
1. Login ke Blogger
2. Klik Template > Edit HTML
3. Simpan kode di bawah ini sebelum
4. Simpan Template
Pada saat membuat postingan, masuk ke mode HTML kemudian sisipkan kode
pada contoh gambar di atas, kode yang saya pakai seperti ini :
Apabila masuk mode Compose, gambar itu muncul, akan tetapi setelah di Publish akan disembunyikan pada halaman posting.
Semoga bermanfaat buat sobat !
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 (Pastikan gambar sudah diupload)
Sebelum melanjutkan ke cara menampilkan thumbnail hanya pada halaman depan, pastikan gambar sudah diupload ke Blogger. Bagi yang belum tau caranya (Baca: Cara Menyimpan Gambar di Blogger)
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:blog.pageType == "item"'>
<style type='text/css'>
.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" />
pada contoh gambar di atas, kode yang saya pakai seperti ini :
<img class="thumbnail" src="http://3.bp.blogspot.com/-z7BxhAWBkOA/UB1UHcNZXpI/AAAAAAAACRg/xlbmDag2NXo/s1600/blogger-3d.png" alt="blogger logo" />
Apabila masuk mode Compose, gambar itu muncul, akan tetapi setelah di Publish akan disembunyikan pada halaman posting.
Semoga bermanfaat buat sobat !