Cara Membuat Thumbnail di Homepage Tanpa Gambar Dalam Postingan

niachan - Ketika membuat blog yang hanya memerlukan tulisan tanpa gambar di dalam post seperti blog light novel, kita selalu menerbitkan postingan dengan 1 gambar di atas potingan untuk menjadi thumbnail. Namun gambar di atas potingan itu malah membuat artikel kita menjadi jelek dan kurang enak untuk di baca.

Jadi, menurut saya gambar tidak terlalu penting dalam sebuah artikel, namun jika saya tidak memberi gambar pada postingan saya maka tampilan home page saya tidak akan terlihat menarik dan kurang memikat pembaca, karena tidak memiliki rasa penasaran yang kuat, dan rasa penasaran yang diciptakan oleh sebuah gambar.

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. Dari pada bingung ayo kita cari tahu.

Bagaimana Cara Membuat Thumbnail Tanpa Gambar Di Dalam Post ?

1. Masuk / Login ke blog kalian.

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 membuat thumbnail dalam sebuah postingan dengan mengupload sebuah file gambar, namun gambar tidak tampil di postingan artikel.

Cara Membuat Thumbnail

1. Pastikan anda sudah melakukan cara yang diatas.

2. Setelah mengupload file gambar maka akan muncul kode HTML pada tab HTML seperti dibawah ini :

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHIxUdJV5AKEtql5IMH_df-cJeRk7akkMmQHKu95nMOTA1rI1psmnHlaELUQsQQgF59a6Q5Ba5-3xhLqeIiDQGFYjFMvkdwCnq67SrCtK3H95_eYOs5xBO_5MTEsaooLCdxGZioVW1NQ/s1600/11.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/AVvXsEgHIxUdJV5AKEtql5IMH_df-cJeRk7akkMmQHKu95nMOTA1rI1psmnHlaELUQsQQgF59a6Q5Ba5-3xhLqeIiDQGFYjFMvkdwCnq67SrCtK3H95_eYOs5xBO_5MTEsaooLCdxGZioVW1NQ/s1600/11.jpg" width="320" /></a></div>
<div>

3. Ganti tulisan "separator" menjadi "thumbnail", sehingga menjadi seperti ini.

div class="thumbnail" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHIxUdJV5AKEtql5IMH_df-cJeRk7akkMmQHKu95nMOTA1rI1psmnHlaELUQsQQgF59a6Q5Ba5-3xhLqeIiDQGFYjFMvkdwCnq67SrCtK3H95_eYOs5xBO_5MTEsaooLCdxGZioVW1NQ/s1600/11.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/AVvXsEgHIxUdJV5AKEtql5IMH_df-cJeRk7akkMmQHKu95nMOTA1rI1psmnHlaELUQsQQgF59a6Q5Ba5-3xhLqeIiDQGFYjFMvkdwCnq67SrCtK3H95_eYOs5xBO_5MTEsaooLCdxGZioVW1NQ/s1600/11.jpg" width="320" /></a></div>
<div>

Dengan mengganti separator menjadi thumbnail maka gambar tersebut berubah menjadi thumbnail secara otomatis dan tidak akan terlihat di postingan artikel ketika di publikasikan.

Begitulah Cara Membuat Thumbnail di Homepage Tanpa Gambar Dalam Post, jika kalian bingung bisa bertanya di kolom komentar. Semoga bermanfaat !!!

Bagikan Artikel ini