Recent Posts Widget With Thumbnail For Blogger


Recent Posts Widget with Thumbnail for Blogger used to show not only recent post but also show post thumbnail and excerpts of the post in side bar. If you need to change style it with your own design, you just need to change the CSS style. 

You have seen many recent post widgets in the sidebar manly in WordPress sites and you think that add a recent post widgets to blogger site. If you looking for that but you didn’t know how to add recent post widget in blogger then don’t worries about this we give you step by step guide how to add recent post widget with thumbnail in blogger.

Before we Move, You may Also Liked to Read:

Steps of add Recent Posts Widget For Blogger

Follow below steps to add Recent post widget for blogger:

Step 1

Login into your blogger dashboard Go to Layout section in setting and click on add a Gadget link at the top of right side bar shows that below picture.
Recent Posts Widget For Blogger

Step 2

When you click on Gadget link, a popup window will be opened. Now select HTML/JavaScript shows that below picture.
Recent Posts Widget Blogger

Step 3

Now select below code and past it into HTML/JavaScript box.

 <div class=”eggTray”>
<script src=”http://helplogger.googlecode.com/svn/trunk/listbadge.js”>{“pipe_id”:”1a6640e2a78b2c6e736f2220529daae5″,”_btype”:”list”,
“pipe_params”:{“URL”:”YOUR-BLOG/SITE-URL/feeds/posts/default”},
“hideHeader”:”false”,”height”:”500“,”count”: 8 }</script>
<div style=”font-family: arial, sans-serif; font-size: 9px;” class=”ycdr”><a href=”http://www.haakblog.com/2014/10/recent-posts-widget-thumbnail-blogger.html” target=”_blank” title=”Grab this widget”>Recent Posts Widget</a> <a href=”http://haaknews.in/” target=”_blank”>News</a></div><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 {background:transparent url(http://3.bp.blogspot.com/-oxTuqVj1ziA/T6P6wtxqsgI/AAAAAAAACBE/wWR0bb2gfuE/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>

Step 4

Change your site URL in place of YOUR-BLOG/SITE-URL and also adjust your height and number of recent post.

Step 5 

Click Save.

Demo: Recent Posts Widget With Thumbnail For Blogger

 

Now you’re done. Go to your blog and see how its look on your website as shown in below picture.
Recent Posts Widget

Leave a Reply

Your email address will not be published. Required fields are marked *