Display Blogspot Recent Posts Widget With Thumbnails

Displaying a recent posts widget with thumbnail on Blogger Blogspot can be done very easily, if you search the tutorials regarding that in Google you will find a plethora blogs offering their own styles and approaches to install recent posts with thumbnails.

And when I set out this blog, and tweaking number of areas in the template to make it more user friendly and of course search engine robots friendly too. And it didn't slip my mind to also install recent posts widget with thumbnails to make my blog really users friendly.

With that handy widget my visitors will easily discover about number of latest posts published on this blog and the posts are shown in a list called widget that appears on the sidebar.

And of course the existence of the recent posts with thumbnail will increase your blog's page views and reduce the bounce rate at the same time. The longer your visitors stay in your blog the better, and Google is said to also use this factor to decide ranking of the blog.

But surely this kind of widget will effect to our blog's loading time too, the scripts brought by it will slow the loading time. This is not good if you want to keep your visitors interest. Don't worry I will share the tips to speed up blog loading time later.

Untill then let's stick with the main topic which is installing a recent posts widget with thumbnails. The things you need to do is simple and don't need to edit your template, the process can be done via Layout area only.

And by the way here is a demo shown in a picture of recent posts would like once you have it on your sidebar.

The widget looks beautiful, doesn't it? Well if you want to have the same recent posts with thumbnails on your Blogspot then I invite you to follow the instructions below.

How to install recent posts widget with thumbnails.

1. Login to your Blogger.com account.
2. Choose the blog you want the widget to appear.
3. To Layout.
4. Add a gadget.
   
5. Now scroll down to find a gadget namely HTML/Javascript, and click it once you find it.
   
6. When empty box of gadget shows up then paste the recent posts widget with thumbnails code within and save the gadget.
   
7. Here is the lines of codes to display recent posts with thumbnails.
    <div class="eggTray">
   <script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
   "pipe_params":{"URL":"http://yourblogname.blogspot.com/feeds/posts/default"},
   "hideHeader":"false","height":"500","count": 8 }</script>
   <noscript>Your browser does not support JavaScript!</noscript></div>
   <style type=text/css>
   .eggTray {margin:10px 0px;padding:0px;}
   .ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
   .pipesTitle {padding-top:0px;}
   .pipesDescription {display:true;}
   .ycdr, .ycdr a {color:#999999;}
   .widget .popular-posts ul {padding-left:0;}
   </style>

Notes.

• Change the http://yourblogname.blogspot.com with the name of your Blogspot or custom domain if you have.
• 500 is the scrolling feature provided by default, if you don't want to have scroll just remove the 500 only and keep "" intact.
• 8 is the number of recent posts, change it into number you need.
• True is to show description of each recent post, so if you want each recent post to have a description then keep it true, if you don't want it just change true to none.
• Done!

You can now see your home page blog and refresh it to see the new and shiny recent posts widget with thumbnails on your sidebar or anywhere you placed.