Recent Posts widget enables you to show your reader the most newest Articles in your Site or Blog. If your blog have long posts and you want to help your visitors to find your recent posts quickly, without spending time browsing you blog searching for your older posts. Then displaying small thumbnail images adjacent to post titles in the recent post widget on your Blogger blogs could be the right fix. This won't only works greatly but will add a glamorous beauty to your Site.
You can easily customize whether or not you would like to display thumbnails, post summaries, and the number of comments for each post along side the titles.
Follow these steps to add the "Recent Posts Widget With Thumbnails" in your Blogger blog.
Placing Your Widget
Sign in to Your Blogger Dash Board > Layout > Add a Gadget > HTML/JavaScript
Adding HTML to the Widget
<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://www.webaholic.co.in/other/recent-posts-widget-with-images.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://www.BLOG-URL.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<small><a style='margin-left:10px;align:right;' href='http://www.blogger.webaholic.co.in/2011/08/recent-posts-widget-with-thumbnails-for.html' target='_blank'>Recent Posts Widget</a> | <a href='http://bloggingindustries.blogspot.com/' target='_blank'>Blogging Industries</a></small>
Customizing Recent Posts Widget
Change "BLOG-URL" to your own Blog Url. And remember " var numposts = 5; " where 5 is the number of posts to be displayed.
At last Save the Code and You are Done !
Warning : Don't Copy from this Post Without Linking Back to the Post
Hi! I am Dulshan, a Pro Blogger, an E-money Guider for the those who need. I have created Blogrithm and currently runs it. Helping to the People who struggle to make money from the Internet is the cause which motivate me in creating the Site. 
0 comments:
Post a Comment