Wednesday, June 3, 2009

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.

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.

"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.

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/

To display the number of comments each post has change remove "no" from text = "no";

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

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:

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.

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

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.