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 tmpilan artikel saya menjadi jelek dan kurang enak untuk di baca.

Padahal artikel yang bagus itu artikel yang mampu membuat pembacanya merasa nyaman dalam membaca. Sayapun mulai berfikir ini sebuah artikel bukan komix. 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, lalu saya 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 blog juragan.

2. Pilih template/tema.

3. Edit HTML.

4. Cari kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

5. Pastekan kode di bawah ini di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

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

6. Simpan template.

Selanjutnya kita akan mencoba untuk 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 gambar di upload, 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/AVvXsEi8C7LAU6Jo-2-qjcoLjf9EAmUZRoQM_bGvWl89dI4PoelWiS2o4Zi8JsK2umvBGckaUVbv3UJJt2NoaP65VjUSGmI5ia6PqA9P4QHgB0HRa_JyA21-3Hoxfat6eugl9QzWMInbTGxMe02-/s1600/mengatasi+pulsa+indosat+sering+terpotong+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="565" data-original-width="734" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8C7LAU6Jo-2-qjcoLjf9EAmUZRoQM_bGvWl89dI4PoelWiS2o4Zi8JsK2umvBGckaUVbv3UJJt2NoaP65VjUSGmI5ia6PqA9P4QHgB0HRa_JyA21-3Hoxfat6eugl9QzWMInbTGxMe02-/s320/mengatasi+pulsa+indosat+sering+terpotong+1.jpg" width="320" /></a></div>
<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/AVvXsEi8C7LAU6Jo-2-qjcoLjf9EAmUZRoQM_bGvWl89dI4PoelWiS2o4Zi8JsK2umvBGckaUVbv3UJJt2NoaP65VjUSGmI5ia6PqA9P4QHgB0HRa_JyA21-3Hoxfat6eugl9QzWMInbTGxMe02-/s1600/mengatasi+pulsa+indosat+sering+terpotong+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="565" data-original-width="734" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8C7LAU6Jo-2-qjcoLjf9EAmUZRoQM_bGvWl89dI4PoelWiS2o4Zi8JsK2umvBGckaUVbv3UJJt2NoaP65VjUSGmI5ia6PqA9P4QHgB0HRa_JyA21-3Hoxfat6eugl9QzWMInbTGxMe02-/s320/mengatasi+pulsa+indosat+sering+terpotong+1.jpg" width="320" /></a></div>
<div>

Dengan megganti "separator" menjadi "thumbnail" maka gambar tersebut akan otomatis berubah menjadi thumbnail saja dan tidak terlihat di dalam artikel ketika di publikasikan.

Begitulah cara membuat thumbnail postingan blog, dengan gambar tidak terlihat di dalam artikel. Semoga bermanfaat!!!

Share this post

Artikel Rekomendasi