Join Over 10,000 Blogger !

Saturday, June 15, 2013

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.

Steps of add Recent Posts Widget to 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 to 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 With Thumbnail For 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>
<a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger tutorial"><img src="https://bitly.com/haakblog" alt="blogger tutorial" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<a href="http://www.haakblog.com/2014/02/download-best-blogger-templates-of-2014.html" rel="dofollow" target="_blank" title="blogger templates"><img src="https://bitly.com/haakblog" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.haakblog.com/2013/06/recent-posts-widget-with-thumbnail-for.html" target="_blank" title="Grab this widget">Recent Posts Widget</a> <a href="http://www.haakblog.com/" target="_blank">Blogger Widgets</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 With Thumbnail For Blogger

If you have any question or update than you can contact with us any time at our E-mail support Haakblog@gmail.com. I am always ready for fixing your css/HTML issues, For personalized help, you can HIRE ME

If you like this post and wish to get more post like this when we add new tutorial about blogger then SUBSCRIBE TO OUR RSS FEED! At Below:

Don't Forget To Join US Our Community
x