Wednesday, June 3, 2009

Recent post with thumbnails widget for Blogger

Displaying small thumbnail images adjacent to post titles in the recent post widget on blogs not only looks nice, but also entice visitors to click on your posts. So how to do it in Blogger? Blog The MLxperience has put together a beautiful working script. This is how to implement it on your blog.


Create a new HTML widget and copy paste the following code:

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://YOURIMAGEURL.jpg";
imgr[1] = "http://YOURIMAGEURL1.jpg";
imgr[2] = "http://YOURIMAGEURL2.jpg";
imgr[3] = "http://YOURIMAGEURL3.jpg";
imgr[4] = "http://YOURIMAGEURL4.jpg";

showRandomImg = true;

tablewidth = 248;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 118;
imgheight = 100;

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";

text = "no";

showPostDate = false;

summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

numposts = 5;

home_page = "YOUR BLOG URL";

</script>
<script src="http://recent-post-thumbnail.googlecode.com/files/recentposts_thumbnail.js" type="text/javascript"></script>

There are many variables in this script that you need to adjust to blend the widget’s look with that of your blog template. Most of them are self explanatory.

  1. "http://YOURIMAGEURL.jpg" and its array should be set to your uploaded images that will display if you post an article without an image. You can add a bunch of images to this array and anyone of it will be picked up at random. If you always include at least one image on every post, this array is not required and can be left untouched.
  2. YOUR BLOG URL should be replaced with the actual URL. Add a trailing slash (/)at the end of the URL. Example: http://www.instantfundas.com/
  3. To display the number of comments each post has change remove "no" from text = "no";
  4. Play with the width, color etc to match your blog template. It should be noted that widget is based purely on tables and no CSS is used.

How to further customize the widget

recent-post-ver recent-post-thumb-ver1 recent-post-thumb-hor 

This particular Javascript file generates a recent post widget with thumbnails on the left and post titles on the right. But you can change the position of the different elements of the widget as shown in the screenshots above. Here are some live examples:

- Horizontal widget instead of vertical (live example on the author’s blog )
- Post title at the top of thumbnails (another example).

Update: You will find the JavaScript files for the horizontal widget and post title on top widget at the project's homepage at Google Code

This is how to do it. Open the Javascript file in a text editor. Towards the end of the script you will find the following code:

var trtd = '<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td>
<td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br /> '+cmtext+ ' ' + daystr + '<div style="color:'+summaryColor+'; margin-top:2px; border-top:1px '+borderColor+' solid; font-size:'+summaryFontsize+'px;">'+icon2+removeHtmlTag(postcontent,summaryPost)+'...</div></td></tr>';

if(summaryPost == 0) { trtd = '<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td>
<td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br /> '+cmtext+ ' ' + daystr + '</td></tr>'; }

This is the code that renders the table. The first <td> houses the thumbnail image. The second <td> houses the post title. If the code looks confusing to you, don’t worry, you don’t even have to know how it works.

Just create a new table and move the exact codes between the <td> and </td> tags to the desired cells, paying attention to correctly specify the width/height of the cells either using absolute values or the variables ‘+imgwidth+' and +’imgheight+'. You don’t have to create the complete table, just the first one or two cell depending upon how you have designed it. These cells will be repeated for each new post. If you know how to create tables in HTML it’s pretty straightforward.

18 comments:

  1. But it's static... how to make it scrolling?

    ReplyDelete
  2. Yes it's static. Scrolling is not available in this widget.

    ReplyDelete
  3. Check this Recent Post with Thumbnails Widget that fetch contents from your rss feed. http://bryandel.net/feed

    ReplyDelete
  4. I have find a quick and easy to install and customize Recent Post Widget with thumbnails. You can install it in minute with hassle-free complicated manual code installation.

    You may look at this link for more information : http://www.engadgeteer.com/2009/07/recent-posts-widget-with-thumbnails.html

    ReplyDelete
  5. The link is updated for the recent post with widget on thumbnails:

    You may look at this link for more information : http://www.techgeeze.com/2009/07/recent-posts-widget-with-thumbnails.html

    ReplyDelete
  6. Cool widget the tumbnails definatly lead to more clicks.

    ReplyDelete
  7. Can you help me buddy, I can seem to get it to work in a verticle fashion, but I can seem to do it in a horizontal fashion. I've downloaded the JS file from your web-site, and then loaded it up upon mine - referencing it in my script. But the bloody thing does not work! Help!
    Jason

    ReplyDelete
  8. @The Reviewer, I just checked the vertical widget. It's working. Maybe you did something wrong? Did you put the trailing slash after your blog URL?

    ReplyDelete
  9. Hey, first of all, thanks for the awesome widget! But is there a way to edit the JS file so that my thumbnails are not stretched? Some kind of auto-crop or auto sizing for the thumbnails?

    Thanks!

    Here's my link: http://www.dailydawdle.com

    ReplyDelete
  10. Hi,

    thanks for the great tips. Its work great for me. 1 question : could we make the title link hovered like the template setting?

    Thanks

    ReplyDelete
  11. Is there a way to pull from a single category/tag/label rather than just recent posts? Maybe with an RSS feed?

    I'm very handy with html/css/js, but I have a client who wants to pull specific "featured" posts--he doesn't know any code, and I'd love to set it up so he can just tag posts to include them in a horizontal list like this.

    ReplyDelete
  12. @positdesign, yes there is a way.

    In the HTML widget add a new line label="featured";

    Then use a JS file uploaded on Nov2010, from the download page.

    ReplyDelete
  13. Have anyone tried this? is the image static? I need something where the image is dynamic.

    ReplyDelete
  14. For example I make this :

    first post second third
    fourth post fifth sixth

    How can I make this?

    ReplyDelete
  15. For my blog , the images are not displaying...........

    ReplyDelete

Popular Posts