Saturday, February 11, 2017
How To Add Recent Posts Widget With Thumbnails For Blogger
How To Add Recent Posts Widget With Thumbnails For Blogger
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>
Available link for download
