
This is a easy way to attract your visitors to read more topics at your site. If 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 related to post titles in the recent post widget on your Blogger blogs could be
the right way.
This not only looks nice, but also entire 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.
To get the recent posts widget do the following:
Step 1 :
Go to your
Blogger
Dashboard >
Layout >
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://spiceupblogging.blogspot.in/2012/07/recent-posts-widget-with-thumbnails-for.html '
target='_blank'>Recent Posts Widget</a> | <a
href='http://www.spiceupblogging.com/'
target='_blank'>SpiceUpBlogging</a></small>
|
Step 3
:
Change
YOUR-BLOG-URL
with your
blog url.
Step 4
:
Save the template.
Note :
You can change the number of posts as you needed.
var numposts =
5; where
5 is the number of posts to be displayed.
Interesting! Work on my site: http://www.our-scholarships.com/
ReplyDeleteWht to change if i only want headline
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete