Menyembunyikan Gambar Artikel Menjadi Thumbnail
ignielkom - Kali ini ignielkom akan share cara menyembunyikan gambar postingan menjadi thumbnail yang sangat keren.
Mengenai postingan di blog, sebuah gambar tentu sangat di perlukan, untuk sekedar memberi rasa penasaran pengunjungnya. Sebenarnya saya selalu menerbitkan postingan dengan 1 gambar di atas postingan untuk menjadi thumbnail.
harapan saya agar tampilan di page home menjadi lebih menarik dengan adanya gambar. Namun setelah saya menulis beberapa artikel, lama-lama saya merasa bahwa gambar di atas postingan itu malah membuat tampilan artikel saya menjadi jelek dan kurang enak untuk di pandang.
Padahal artikel yang bagus itu artikel yang mampu membuat pembacanya merasa nyaman dalam membaca. Jadi saya rasa gambar tidak terlalu memiliki peran penting dalam sebuah artikel, namun jika saya tidak memberi gambar sama sekali pada artikel saya, maka tampilan.
Setelah itu saya memutuskan untuk membuat gambar thumbnail, jadi gambar atau poto yang saya buat thumbnail ini akan tampil di homepage saja atau bisa dibilang tidak akan tampil di artikel.
Bagaimana Membuat Thumbnail atau Gambar Yang Hanya Tampil di Hompage
- Masuk atau login ke blogger kalian
- Pilih Template/Tema
- Edit html
- Cari kode
- Pastekan kode dibawah ini diatas kode
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.thumbnail {display:none}
</style>
</b:if>
6. Jika sudah selesai silahkan Save Template kalian.
Selanjutnya kita buat postingan dan upload sebuah file gambar untuk kita jadikan thumbnail artikel.
Langkah-langkah membuat thumbnail gambar yang tidak tampil di artikel
- Setelah selesai mengupload, kita ganti mode penulisan dari "compose" menjadi "HTML" letaknya ada di pojok kiri atas.
- Di mode penulisan HTML akan muncul kode seperti di bawah ini:
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-OXG6kUVfNO9B7tjKyIy9bqGFRpgeKoA-lr1ebuMsYavDZVvHZRcgQ4jIyJQQHN5Mv2Y_3pnRbdlK69BB1GruhVe2A8Z15uE_QF86RzQRRyL6tiCW7acAA2AfKe422KGTjpx_VTStvSMp/s1600/Bandwidth.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="284" data-original-width="691" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-OXG6kUVfNO9B7tjKyIy9bqGFRpgeKoA-lr1ebuMsYavDZVvHZRcgQ4jIyJQQHN5Mv2Y_3pnRbdlK69BB1GruhVe2A8Z15uE_QF86RzQRRyL6tiCW7acAA2AfKe422KGTjpx_VTStvSMp/s320/Bandwidth.jpg" width="320" /></a></div><br />
3. Ganti "separator" menjadi "thumbnail" (fokus pada tulisan yang berwarna merah), hingga menjadi seperti ini.
<div class="thumbail" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-OXG6kUVfNO9B7tjKyIy9bqGFRpgeKoA-lr1ebuMsYavDZVvHZRcgQ4jIyJQQHN5Mv2Y_3pnRbdlK69BB1GruhVe2A8Z15uE_QF86RzQRRyL6tiCW7acAA2AfKe422KGTjpx_VTStvSMp/s1600/Bandwidth.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="284" data-original-width="691" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-OXG6kUVfNO9B7tjKyIy9bqGFRpgeKoA-lr1ebuMsYavDZVvHZRcgQ4jIyJQQHN5Mv2Y_3pnRbdlK69BB1GruhVe2A8Z15uE_QF86RzQRRyL6tiCW7acAA2AfKe422KGTjpx_VTStvSMp/s320/Bandwidth.jpg" width="320" /></a></div>
<br />
Dengan megganti separator menjadi thumbnail maka gambar tersebut akan otomatis berubah menjadi thumbnail dan tidak terlihat di dalam artikel kalian jika di publikasikan.
