Cara Membuat Gambar Default Pada Popular Post

Tutorial | Dalam postingan terdahulu, yaitu Cara Membuat Popular Post Dengan Gambar Horizontal, Admin pernah membahas tentang thumbnail default popular post ini. Dimana setiap postingan yang tidak memiliki gambar akan terlihat kosong. Dan tentu saja itu sangat tidak nyaman dilihat. Apalagi jika kita menerapkan fitur popular post ini tanpa deskripsi.

Oleh sebab itu ada baiknya jika kita sedikit memodifikasi kode widget bawaan dari blogger tersebut
agar ketika suatu postingan yang tidak memiliki gambar menjadi postingan populer, maka secara otomatis akan terlihat tetap memilik gambar.
Ok sobat..
Langsung saja yahh.,. ke Cara Menambahkan gambar Default pada Popular Post.

• Seperti biasa, login ke dashboard blogger kemudian pilih design => Edit HTML.
• Centang Expand Widget Template.
• Cari kode:

<b:widget id='PopularPosts1' locked='false' Posts' title='Popular type='PopularPosts'/>

• Ganti semua kode kebawahnya sampai kode </b:widget> pertama yang sobat temukan dengan kode dibawah ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

<b:includable id='main'>
<b:if cond='data:title'><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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>

<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' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZOXScNZDADwDfhY_K016Y_gWI87y5zxSVxfW3V_aQDwBs4wG2E5b6plLhPXKUxZRv5kP8ZdOWkyXr7laoNCVxTH2zQe23CNYmVE8uLgRp0-bmY5vA7DI9JddXWu8UT3_eeUB9m9gzKPw/s72-c/default.png' expr:width='data:thumbnailSize'/>
</b:if>
</a>
</div>
</div>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<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' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZOXScNZDADwDfhY_K016Y_gWI87y5zxSVxfW3V_aQDwBs4wG2E5b6plLhPXKUxZRv5kP8ZdOWkyXr7laoNCVxTH2zQe23CNYmVE8uLgRp0-bmY5vA7DI9JddXWu8UT3_eeUB9m9gzKPw/s72-c/default.png' expr:width='data:thumbnailSize'/>
</b:if>
</a>
</div>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

*** Ganti kode warna merah tersebut dengan url gambar sobat sendiri.
5. Save Template.

Untuk menemukan kode tersebut, pastikan widget popular post telah dipasang diblog sobat.
Semoga berhasil sobat..!!! :)