Hello friends, Today i am going to share how to add a beautiful "Recent posts Widget" on blogger blogs. This widget is very simple. Now, displaying a latest posts widget to your blogger blog is good practise. I have styled this beautiful widget to best suit your blog. You can easily add it through your layout option of your blogger blog. You can see the screenshot too.
Adding The Widget In Layout
Go to Blog Tittle -> Choose Layout -> Click Add a Widget -> Add HTML/Javascript -> And Paste this Code in the box.
<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://yourjavascript.com/1159358112/www.mybloggertopic.blogspot.com.js'></script>
<script style='text/javascript'>
var numposts = 4;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<hr/><small><a style='margin-left:10px;align:right;' href='http://mybloggerblog.com/2012/11/recent-posts-widget-with-thumbnails-for_10.html' target='_blank'>Recent Posts Widget</a></small>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://yourjavascript.com/1159358112/www.mybloggertopic.blogspot.com.js'></script>
<script style='text/javascript'>
var numposts = 4;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<hr/><small><a style='margin-left:10px;align:right;' href='http://mybloggerblog.com/2012/11/recent-posts-widget-with-thumbnails-for_10.html' target='_blank'>Recent Posts Widget</a></small>