Recent Posts Widget with Thumbnails for Blogger/Blogspot

We have already posted a tutorial on how to add a simple recent posts widget that shows a list with the most recent posts if you'd prefer a more minimalist look. This tutorial will show you a different way of displaying the Recent Posts on Blogger. This is specially for users who want to show more isu like recent posts excerpt or summary and the posts thumbnails.

To add the Recent Posts widget with thumbnails in Blogger is very easy. Just follow these steps below:

How to Add the Recent Posts Widget to Blogger

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

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

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

- replace YOUR-BLOG with the url of your site or blog (ex: http://helplogger.blogspot.com) and look to have just one forward slash symbol "/" at the end of the url otherwise will not work
- to disable the scroll bar, remove the 500 value
- 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
- 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!

Share this post