Membuat Thumbnail pada Popular Post Tidak Bergambar

Tutorial blogger kali ini tentang cara membuat thumbnail pada widget popular post yang tidak bergambar . Hal ini untuk memperindah tampilan ...

Tutorial blogger kali ini tentang cara membuat thumbnail pada widget popular post yang tidak bergambar. Hal ini untuk memperindah tampilan popular post agar semua link di widget ini menjadi bergambar, meskipun pada postingan atau artikel yang tidak diberi gambar skalipun, sehingga tampilan blog menjadi SEO friendly.

Sebetulnya modifikasi seperti ini tidak perlu dilakukan jika blog anda berada dalam kondisi (1) Seluruh konten blog diisi gambar, (2) tidak mencentang ‘tampilkan gambar’ pada widget popular post, (3) anda menggunakan platform wordpress atau selain blogger, dan (4) anda tidak menggunakan popular post.

Baca juga: Membuat Popular Post Keren Warna Warni di Blog

Namun, jika sebagian artikel anda menggunakan gambar dan sebagian lainnya tidak menggunakan gambar, tetapi artikel yang tak bergambar tersebut menjadi postingan populer di blog tersebut, maka anda perlu memodifikasinya sehingga tampilan popular post jadi lebih keren.

Cara Membuat Thumbnail/Gambar pada Widget Popular Post No Images

1. Login ke blogger, masuk ke dasbor blog > Template > Edit HTML
2. Lalu pilih Lompat ke widget > PopularPosts1

3. Hapus code popular post anda (seprti yang ditandai pada gambar di bawah ini) yang lama dan ganti dengan code berikut ini:

          <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
            <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>

    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href' target='_blank'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href' target='_blank'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
<b:else/>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguFBeZrE0fkgxl_A31lJtz_RX9PjpEfeORz4zWLJX1WtO7ibIYJIYsYl5maVUyhTsLboczC4lAElo40SaeAlXqwJRQI9XOOHlcMCZv45ufa8ibcDPj9-t-NdK1NYeNq2mJYrXFh6FRWVw/s1600/no_thumb.png'/>
</b:if>
</a>
</div>
            <div class='item-title'><a expr:href='data:post.href' target='_blank'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
          </b:widget>

4. Simpan template, dan lihat hasilnya.

Selesai…