Powered by Blogger.
Menu :

Recent Posts Widget For Blogger With Thumbnails

On my previous posts I've shared a lot of blogger widgets that can can help in keeping your readers to stay longer in your blog. And today am bringing to you the most used widget in the blog-o-sphere known as recent posts widget. With this blogger widget you're sure of increasing your blog's pageviews and thus boosting your blog's traffic. This widget is absolutely very necessary for bloggers to add it to their blog. Follow the below steps to add recent post widget for blogger.

Recent Post Widget For Blogger

How To Add Recent Posts Widget To Your Blog?

1. Go to Blogger Dashboard => Layout
2. Click the Add Gadget link as pictured below.


3. Once you've clicked on the "Add Gadget" link on the sidebar, scroll down until you find HTML/Javascript. 

Add Gadget For Blogger

4. Click on the  +  sign and paste the codes given below inside the text-area of the box.

<div class="$bs-recent-posts-widget">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"http://www.blogstable.com/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.blogstable.com/2013/07/recent-post-widget-for-blogger.html" target="_blank" title="Grab this widget">Recent Posts Widget With Thumbnails</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.$bs-recent-posts-widget {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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxU9plZIli_GTxDMX_84teOMNV6bR4ibPeDJJNrwOXe7BHblJFzSXil69Lqocmt4NhA4-h4N49QZ9KV8DMlYXtVIV6osHyJHadl3XOd-m7NZPOfInX0a8pXtdiKvv9qBBr1-0M3pqV9es/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>
5. Now you have to make some changes for the widget to work properly. Simply replace the http://www.blogstable.com with your own blog address (Url).

6. Finally hit the Save button.. You're done! (Make use of the Optional changes for futher customization)
Optional Changes

1. To disable the scroll bar simply removed the 500 from the code, and the height of the widget would be measured according to the number of posts displayed.

2. To increase or decrease the number of posts displayed on the widget, simply change the value of 8 to the desired number of posts you want to be displayed.

Feedback!

Query? Do you have any query regarding these tutorial on how to add recent posts widget to blogger? We're always there to put you through. Post your queries via comment and we'll get back to you as soon as possible.

Comment! We've done our own part by sharing these informative tutorial with you. So, it's now your turn to show appreciation by leaving a useful comment below.

Share! Don't just read and work away, try sharing it to your friends on social networking sites like, Facebook and twitter. Your friends may find it very useful.

Subscribe! You don't want to miss any of our future updates? Subscribe to our rss feeds to get all our latest updates delivered directly to your email inbox.

0 comments:

Post a Comment