You may have seen a
Recent Posts widget on many blogs, Have you ever wondered 'How to get on
your blog'. Well Today I'll tell you How to add recent posts widget
with thumbnails on blogger blog. This Widget lets your visitors to find your recent posts without any difficulty and without wasting time.
You May Also Like:
How to Add a Flying Twitter Bird on Blogger Blog.
How to Add Subscribe Widget with Multiple Subscribe Options to Blogger.
How to Add a Featured Posts Widget on Blogger.
How to Get a Floating Facebook Like box with Slide on Blogger.
If you wish to see a working demo of this widget then here is a preview of the widget.
Step 1: From your Blog Dashboard, Go to Layout > Add a Gadget.
Step 2: Choose HTML/Javascript Widget.
Step 3: Copy paste the following code inside the widget.
You can customize the code as per your requirement, To change the number of posts to display change 'var numposts = 5'. Hope you guys like this widget please tell me by leaving comments below.
You May Also Like:
How to Add a Flying Twitter Bird on Blogger Blog.
How to Add Subscribe Widget with Multiple Subscribe Options to Blogger.
How to Add a Featured Posts Widget on Blogger.
How to Get a Floating Facebook Like box with Slide on Blogger.
If you wish to see a working demo of this widget then here is a preview of the widget.
How to Add Recent Posts Widget
Here are steps to Install the widget on your blogStep 1: From your Blog Dashboard, Go to Layout > Add a Gadget.
Step 2: Choose HTML/Javascript Widget.
Step 3: Copy paste the following code inside the widget.
<style type='text/css'>Step 4: Now change the Red Text with your Blog Address and Save the widget.
img.recent_thumb {padding:0px;width:55px;height:55px;border:0;
float:left;margin:12px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:14px;}
ul.recent_posts_with_thumbs li {padding-bottom:0px;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 = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 95;</script>
<script src='http://www.the-area51.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
You can customize the code as per your requirement, To change the number of posts to display change 'var numposts = 5'. Hope you guys like this widget please tell me by leaving comments below.
No comments:
Post a Comment