Though you can add this feature by Blogger's Add a Gadget. ( Click on add a gadget >> Featured >> Recent Posts).
But it can not show Ads when you click on link.
So here is a more versatile widget for Recent Posts with Image/Photo Thumbnail.
DEMO of this WIDGET
First make sure all your Site Feeds are Full (Go to Settings >> Site Feeds >> Advanced Mode and check all feeds are full).
Now Go to Layout >> Add a Widget >> HTML/JAVA Script and Copy and Paste following code there.
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 166;
cellspacing = 1;
borderColor = "ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 50;
fntsize = 12;
acolor = "#336699";
aBold = false;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://medimania.blogspot.com/";
</script>
<script src="http://free.blogger.help.googlepages.com/recentpostswiththumbnail.txt" type="text/javascript"></script>
Change http://medimania.blogspot.com/ to your site URL. Save your Template.
Variables Explanation
boxwidth - By changing this value you can alter width of this widget.
cellspacing - It is the space between Thumbnail and title.
borderColor - Background color of widget
thumbwidth & thumbheight - Width and Height of the thumbnail image
fntsize - It is the Font size of the title
acolor - Color of the title
aBold - It defines Bold title
numposts - It defines how many posts you want to show?
Other Recent Posts Widgets
1. Simple Recent Posts Widget using feeds
2. Recent Posts widget (new version with Spy effect)
11 comments:
very nice tutorial. i wanna ask to you how do I get this widget does not appear as a recent post but a random post ?
Check Random posts widget here
http://free-blogger-help.blogspot.com/2009/11/random-posts-widget-with-posts-summary.html
HOw to show only posts with specific Label? as shown in revolutionchurchtemplate.blogspot.com?
Did you mean when you click on any label it will show posts with brief description and not the full content of the post?
images are not being displayed! :(
please check and adjust
thumbwidth = 40;
thumbheight = 50;
how to remove comment e.g. "(1) - comments" after post title? all i need just image and post's title only...pls guide me. tq
how to make the thumbnail images were placed side by side instead of placed below?
@ man chicha's mum
You can Delete/Change the comments word here
text = "comments";
thumbnails are place side by side and not bellow as shawn in demo.
I was able to delete the "comments" word, but how to delete the numbers of comments?
you can't do that.
Post a Comment