Adding Default Thumbnail on Popular Post on Blogger

Since I started posting before with no image, some of my popular post does not create thumbnails. As a result, there are posts on the list that tends to be out of place with the others.

So to resolve this, I have added a default image on the popular post list in case there is no thumbnail for the post.





To add the popular post (in case you haven't added it yet):

1) Go to the "Design > Page Elements" Page and add the "Popular Posts Gadget"

2) Edit the Gadget Settings so that it displays the 'Thumbnails'

3) Now go to "Edit HTML" and click "Expand Widget Templates". Prior to this make sure that you back up your template first in case of any trouble then look for this code:
Note that the 'title' might be different in your case.

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

4) Now scroll down and look for this part:

<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
  <b:if cond='data:post.thumbnail'>
 <div class='item-thumbnail'>
   <a expr:href='data:post.href' target='_blank'>
  <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
   </a>
 </div>

5) Just below the code on number 4, add this:

<b:else/>
 <div class='item-thumbnail'>
  <a expr:href='data:post.href' target='_blank'>
   <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvaNwKBGRYzotbEg_rvLiOr1dwYbk1kYnXJGX6548hOp8Egb6Bj3RfCjnQbc3D57cr1WacAK9L_AfloDcskW2DHkdr2Btmx_f34vmaS26HsLQI7wdk81D9WzaesXNiw0nUpVNolUhiUM2E/s200/default.png'/>
  </a>
 </div>

6) Finally, save your template and enjoy! :)

Cheers!