How To Add Recent Posts Widget With Thumbnails In Blogger

This tutorial will show you a different ways of displaying the Recent Posts on Blogger. This specially for users who want to show more info like recent posts summary and the post thumbnails.

To add recent posts widget with thumbnails in blogger is very easy. just follow below steps :

How to add the Recent Posts Widget to Blogger

Step 1. From your Blogger Dashboard, go to layout > click on Add a Gadgte link.

Step 2. Once the pop-up window appears, scroll down and choose HTML/Java Script.

Step 3. Inside the empty box, add the following code.

<div class="eggTray">
<script src="https://googledrive.com/host/0B4n9GL3eVuV-bFc4a1RjZ2Zhbjg">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"YOUR-BLOG/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>

Recent Posts Widget Settings

1. Replace YOUR-BLOG with the url of your site blogg
2. To disable the scoll bar, remove the 500 value.
3. By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace 8 with the number of posts that you want to show.
4. To display only the post titles, change true to none and "0" from padding-top:0px with 10.

Step 4. Save your widget. and you're done.