Recent Posts Widget with Thumbnails for Blogger

Tweet

 

In this post I am going to show you how you can add a Recent Posts Widget with post images to your blog.  (If you prefer a Recent Post widget without thumbnails, you might like the Recent Posts Widget for Blogger)

How to install the widget:

1. Go to your Blogger Dashboard --> Design --> Page Element --> Add a Gadget --> HTML/JavaScript

2. Copy the code below and paste it into the HTML/JavaScript box:

<div class="pipesContainer">

<script src="http://pipes.yahoo.com/js/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list","pipe_params":{"URL":"http://YourOwnBlog.blogspot.com/feeds/posts/default?max-results=8"},"height":"auto"}</script>

<script language="JavaScript" type="text/javascript">var i,y,x="3c64697620636c6173733d22796774223e506f7765726564206279203c6120687265663d22687474703a2f2f70697065732e7961686f6f2e636f6d2f22207461726765743d225f626c616e6b223e59212050697065733c2f613e9920266e6273703b266e6273703b3c6120687265663d22687474703a2f2f7777772e6d6164746f6d61746f652e636f6d2f726563656e742d706f7374732d7769646765742d776974682d7468756d626e61696c732d666f722d626c6f676765722f22207461726765743d225f626c616e6b223e47726162207468697320576964676574213c2f613e3c2f6469763e";y='';for(i=0;i<x.length;i+=2){y+=unescape('%'+x.substr(i,2));}document.write(y);</script>

<style type=text/css>

.pipesContainer {margin:10px 0 10px 0;padding:5px 5px 5px 5px;border:1px dotted #666666;background:none;}

.pipesHolder {padding: 0px!important;}

.pipesTitle {padding-top:14px!important;}

.pipesDescription,.pipesSmallthumb {display:none!important;}

.pipesThumbnail img {background-color: transparent;

background: url(http://1.bp.blogspot.com/_LqmwslVmHqM/TFQ5FmgcPRI/AAAAAAAAB7M/5nTPNdVga2k/s400/bloggerlogo-4.png) no-repeat top center;border: none!important;}

.ybh,.yba,.ybf {display:none!important;}

.ygt {margin-top:10px;margin-bottom:10px;font-size:9px;float:left;}

.ybr li  {background-color: transparent!important; padding:0px!important;}

</style></div>

3. In the above code, look for the following line:

{“URL”:”http://YourOwnBlog.blogspot.com/feeds/comments/default…

…and replace the blog address with address of your own blog.

If you have a self-hosted blog, add your blog address like this:

{“URL”:”http://www.YourOwnBlog.com/feeds/comments/default…

4. Add a title.

5. Save.

That´s all!

 

Optional settings:

How to change the number of posts

By default, this widget is set to display a maximum of 8 recent posts.  To change this number, edit line #2 in the code and replace the number 8 with the number of posts desired:

{“URL”:”http://YourOwnBlog.blogspot.com/feeds/posts/default?max-results=8“

Style

If you know your way through CSS, you can style the widget to suit your need.

What do you think of this widget?

If you have questions or suggestions, please let me know by leaving comment below.

Good luck!

 

Related article:

Recent Posts Widget for Blogger