Cara Membuat Thumbnail Postingan Blog, Sembunyikan Gambar Dalam Artikel Menjadi Thumbnail

Cara Membuat Thumbnail Postingan Blog, Sembunyikan Gambar Dalam Artikel Menjadi Thumbnail

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 home page akan menjadi jelek dan kurang memikat, karena pembacanya tidak meliki rasa penasaran yang kuat, rasa penasaran yang di ciptakan oleh sebuah gambar.

Dari pada bingung, saya langsung putuskan untuk membuat thumbnail. Jadi gambar atau foto yang saya buat thumbnail ini akan tampil di home page saja dan tidak akan tampil di dalam artikel.

Bagaimana Cara Membuat Thumbnail atau Gambar Yang Hanya Tampil di Home Page ?

1. Masuk atau Login ke blog kalian
2. Pilih template/tema

3. Edit HTML
4. Cari kode
5. Pastekan kode di bawah ini di atas kode

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

6. Jika sudah selesai mengubah HTML di theme, langsung save saja.

Selanjutnya kita membuat postingan dan upload sebuah file gambar dalam postingan tersebut untuk kita jadikan thumbnail dan tidak akan tampil di dalam artikel.

Cara membuat thumbnail gambar tidak tampil dalam artikel

1. Setelah selesai mengupload, kita ganti mode penulisan dari "compose" menjadi "HTML" letaknya ada di pojok kiri atas.
2. 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/AVvXsEhcqiswUul2GXbawa_hyphenhyphenHtUnRlGDvxGzhGIosdgbHfsVAPuCAavD0Mat7NfOAHELKj54cl1iMv0nTaebI1dfFmhGFAP4itY5ImR1_TNmiqKnwUtxwOz82XY0nzpDofxBM3dyps0ykgLyguR/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/AVvXsEhcqiswUul2GXbawa_hyphenhyphenHtUnRlGDvxGzhGIosdgbHfsVAPuCAavD0Mat7NfOAHELKj54cl1iMv0nTaebI1dfFmhGFAP4itY5ImR1_TNmiqKnwUtxwOz82XY0nzpDofxBM3dyps0ykgLyguR/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/AVvXsEhcqiswUul2GXbawa_hyphenhyphenHtUnRlGDvxGzhGIosdgbHfsVAPuCAavD0Mat7NfOAHELKj54cl1iMv0nTaebI1dfFmhGFAP4itY5ImR1_TNmiqKnwUtxwOz82XY0nzpDofxBM3dyps0ykgLyguR/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/AVvXsEhcqiswUul2GXbawa_hyphenhyphenHtUnRlGDvxGzhGIosdgbHfsVAPuCAavD0Mat7NfOAHELKj54cl1iMv0nTaebI1dfFmhGFAP4itY5ImR1_TNmiqKnwUtxwOz82XY0nzpDofxBM3dyps0ykgLyguR/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.
Di artikel selanjutnya saya akan mengajarkan Cara Membuat Kotak Di Dalam Artikel 

Demikian artikel hari ini saya sampaikan. Terimakasih telah berkunjung

Share this post