Recent Posts Widget with thumbnail image for every posts for Blogspot (very cool)

Thank you for visiting Design24h.com. Do you have comments or questions comment about this article comments.You can also read the article on the blog via the tools to read news Feed Link with this or to subscribe to new posts via email. In addition, you can address this blog to Favorites (Internet Explorer) or Bookmarks (Mozilla Firefox) for easy tracking. If you're working at Google Blogger blog you can also save this blog in the track records, which are the sources that bring visitors your blog. I hope you find interesting tips from this page.

Before time, if you have used the "recent Posts widget", written by Hans, it display only the title of recent posts, the date of posts and nothing more. With my widget code, it still shows the thumbnail images of posts, which are get from first images of posts. You can see this example:

Here is the code of widget:

<script type="text/javascript">

imgr = new Array();

imgr[0] = "http://anhvo.info.googlepages.com/phi00001.png";


imgr[1] = "http://anhvo.info.googlepages.com/phi00002.png";

imgr[2] = "http://anhvo.info.googlepages.com/phi00003.png";

imgr[3] = "http://anhvo.info.googlepages.com/phi00004.png";

imgr[4] = "http://anhvo.info.googlepages.com/phi00005.jpg";


imgr[5] = "http://anhvo.info.googlepages.com/phi00006.jpg";

imgr[6] = "http://anhvo.info.googlepages.com/phi00007.jpg";

tablewidth = 180;

cellspacing = 1;


bgColor = "#ABAE9B";

imgwidth = 45;

imgheight = 45;

bgTD = "#000000";

fntsize = 12;


acolor = "#ffffff";

icon = "&#8226;";

text = "comments";

numposts = 10;

home_page = "http://en.vietwebguide.com/";

</script>

<script src="http://anhvo.info.googlepages.com/recentposts_thumb4.js" type="text/javascript"></script>

Before insert it into your widget (HTML/Javascript), you should change some valid parameters (the red code):

The Links http://anhvo.info.googlepages.com/phi00001.png to http://anhvo.info.googlepages.com/phi00007.png : these are the images, which will show as the thumbnails of posts, which have no any pictures in it. You can dont change these links.

Number 180: width of your sidebar. You can change it into your interested.

Cellspacing = 1 : spacing between thumbnails and titles.

bgColor = "#ABAE9B" : color if border widget.

imgwidth = 45; imgheight = 45 : the width and height size of thumbnails.

bgTD = "#000000" : color of background of widget;

fntsize = 12; : font size of title link;

acolor = "#ffffff" : color of the title links

text = "comments" : the text message of comments. If you dont want to show your numbers of comments of posts in this widget, change it into text = "no"

numposts = 10 : the max numbers of posts in this widgets.

home_page = "http://en.vietwebguide.com/" - change http://en.vietwebguide.com/ in your blog URL, dont forget / in the end.

Now you place the code in your new widget. And the last, you need go to Setting -> Site Feed, change the line Allow Blog Feeds into Full mode, click Save Setting, and now your widget will works fine.

I hope you will successful make this widget. If you have any question, please comment above. I will soon answer to you.

For body, who want to show the post date: try to change the link http://anhvo.info.googlepages.com/recentposts_thumb4.js in above code into http://vietwebguide2.googlepages.com/recentposts_thumb4_postdate.js, widget will show the post date for you.

Anh Vo

You may be interested in the following freebies as well:

Search In Blog:

Thank you for reading the article. Do you have suggestions or how better to go back a few words to share with everyone. Please note you, these comments have no comment of building or helping each other progress will be deleted without notice. In addition, you will not necessarily be a member of the Google Blogger or other networks listed below are new comment, use Anonymous (anonymous) if you do not want to leave personal information of themselves.Wishing to house your have been many visitors. The contents of typing in Chinese are clearly marked will easily account for more than all of sympathy. (Design24h.com).