Recent Posts Widget With Thumbnails For Blogger
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 not only
looks nice, but also entice visitors to click on your posts.
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 (Blogspot) blog.
Step 1 :
Log into
Blogger. Go to your Blogger
Dashboard >
Design/Layout >
Page Element >
Add a Gadget >
HTML/JavaScript
Step 2 :
Copy and paste the code below:
<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.YOUR-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://www.webaholic.co.in/'
target='_blank'>Webaholic</a></small> |
Step 3 :
Change
YOUR-BLOG-URL with your blog url.
Step 4 :
Save the template.
Note :
var numposts = 5; where
5 is the number of posts to be displayed.
0 comments:
Post a Comment