Previously bloggers have been adding recent posts widget by using feed or with javascript which only displays recent posts links only. Now its time to display recent posts with thumbnails using html/javascript widget in blogger. This widget will show Title of Post, few lines of post, thumbnail of post, comments made in post, date of post etc.
Normally, some javascripts just re-size original uploaded image from post which takes a lot of time, to load a thumbnail for recent posts hence not much attractive and useful. But few of developers know that blogger also generates a 75×75 small image of your uploaded image in blogger. So, this widget uses that blogger generated 75×75 small image as a thumbnail which loads rapidly and takes negligible time for loading.
Normally, some javascripts just re-size original uploaded image from post which takes a lot of time, to load a thumbnail for recent posts hence not much attractive and useful. But few of developers know that blogger also generates a 75×75 small image of your uploaded image in blogger. So, this widget uses that blogger generated 75×75 small image as a thumbnail which loads rapidly and takes negligible time for loading.
Recent Posts with Thumbnails Widget for Blogger
- Login to your Blogger account
- Go to Dashboard > Layout > Add a Gadget
- Now add an HTML/Javascipt Widget and put this code in it.
<style>
img.recent_thumb {
padding:1px;
width:55px;
height:55px;
border:0;
float:right;
margin:0 0 5px 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://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.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://YourBlogURL/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script></noscript>
img.recent_thumb {
padding:1px;
width:55px;
height:55px;
border:0;
float:right;
margin:0 0 5px 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://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.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://YourBlogURL/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script></noscript>
- Change YourBlogURL to Your Blog address
- Change numposts = 5 to Show number of Recent posts with thumbnails
- Change numchars = 100 to number of characters to show in summary of recent posts
- Change true to false to activate or deactivate any feature of this widget
Now just save your widget and check your blog. If you face any problem or difficulty installing this widget, submit your difficulty in comments.
No comments:
Post a Comment