Click "view web version" (smartphone)

Pages

Saturday, 12 September 2020

Cara Membuat Thumbnail Artikel Blog, Tetapi Gambar Tak Terlihat di Dalam Artikel

Saat membuat artikel untuk blog tentu diperlukan gambar sebagai pendukung konten. Artikel yang baik harus memiliki setidaknya 1 gambar atau lebih yang berkaitan. Namun pada beberapa kasus, gambar pada konten artikel bukan memperbaiki artikel tetapi malah membuat tampilan menjadi berantakan.

Thumbnail artikel biasanya akan secara otomatis atau default mengambil First Images (Gambar Pertama) pada artikel, bila tidak ada gambar maka thumbnail akan blank (kosong). Berikut langkah-langkahnya.

Pertama:
  1. Masuk ke Dashboard Blogger
  2. Pilih Tema/Template
  3. Edit HTML
  4. Cari </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
  5. Paste kode di bawah ini, di atas </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

Kedua:
  1. Buat artikel seperti biasa.
  2. Insert Image atau masukkan foto yang ingin dibuat thumbnail.
  3. Klik HTML
  4. Lihat kode berikut:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinyy-vzHo6ZsyRaAGx1-9bL5i6i1QdD26b6EhJW75Q3Ndqj-oORxAb4C81YQQ3_D6SYnFdn3BK54DwCEjqNtc37Zo_1VQsQ8bbZK7E2LvUkPAhyTwyw_5m-aYEDTzzoEjFI8ukAMTGies/s1600/Cara+Membuat+Thumbnail+Artikel+Blog%252C+Tetapi+Gambar+Tak+Terlihat+di+Dalam+Artikel-min.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara membuat thumbnail" border="0" data-original-height="455" data-original-width="685" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinyy-vzHo6ZsyRaAGx1-9bL5i6i1QdD26b6EhJW75Q3Ndqj-oORxAb4C81YQQ3_D6SYnFdn3BK54DwCEjqNtc37Zo_1VQsQ8bbZK7E2LvUkPAhyTwyw_5m-aYEDTzzoEjFI8ukAMTGies/s320/Cara+Membuat+Thumbnail+Artikel+Blog%252C+Tetapi+Gambar+Tak+Terlihat+di+Dalam+Artikel-min.jpg" title="cara membuat thumbnail tak terlihat di dalam artikel" width="320" /></a></div>
     
   5. Rubah tulisan "separator" menjadi "thumbnail"
   6. Maka gambar tersebut hanya akan tampil sebagai thumbnail saja

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