Related Posts Widget with Image Thumbnail for Blogger

Related posts widget is demanding for Blogger users as this help your blog readers to know about your older posts. While there are many widgets available on different blogs, there aren’t many which are more customizable than this one which I will be sharing with you.

Why more customizable? It’s because you will get both Related Posts and Recent Posts widget which can be a link list, link list with image thumbnail or with only thumbnail with popup title, transition effects and above all, it’s fast. This is one of the best widget for Blogger ever made and found on the web.

Mike More of More Tech Tips made this widget by using the awesome feature of jQuery. The installation is also very easy. Let’s start with it.

So first you have to visit easy setup page and choose the options you like to have. To start with live examples, you can visit demo 1, demo 2, demo 3 or demo 4. After selecting the correct options click “Update Demo and Code”.

After generating you will find required scripts and codes under the Code section. There are two parts. First is the jQuery library, jQuery plugin, which will run the related post widget and the CSS. Second is the required HTML part. Here is an example image, click to enlarge:

To add the first part to Blogger, follow the steps below:

Step 1: Go to Dashboard > Page Elements > Edit HTML tab.

Step 2: Find ]]></b:skin> tag and below it add the jQuery library and the plugin, which is required, and the CSS files, if needed. Example:

<!-- CSS (required if needed) -->
<link type="text/css" href="http://blogger-related-posts.googlecode.com/svn/v2/style1.css" rel="stylesheet" />

<!-- jQuery Library (required only once) -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'/>

<!-- jQuery Plugin (required) -->
<script type='text/javascript' src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js'/>

If you have previously added the jQuery library then you need not to add another one, just check if it’s latest or not (marked in red) and if not the latest, then you can replace it.

If you have selected Widget Loading option to “jQuery method call”, some extra script code will appear in the Code section under Calling widget, example:

<!--~~~~~~~~ Calling widget --> 
<script type="text/javascript"> 
//<![CDATA[ 
$(document).ready(function(){ 
$('#related-posts-widget').relatedPostsWidget(); 
}); 
//]]> 
</script> 
<!--~~~~~~~~~~~~~~~~~~~~~~~~-->

This should be added just before closing </head> tag.

Step 3: Save your template.

Step 4: Adding the second part is easy. You can add it anywhere you like. You can add it to sidebar or within and below post.

1. If you want it to add to sidebar then go to Dashboard > Page Elements tab and add the required HTML by adding a HTML/JavaScript gadget.
2. If you want it below post then go to Edit HTML tab and check “Expand Template Widget”. Find <data:post.body/> and below it and the required HTML. Example:

<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML --> 
<div class="related-posts-widget"> 
<!-- { 
thumb_size:'s104-c' 
,titles:0 
,max_posts:12 
,tags:[] 
,show_n:4 
,animate:'width' 
} --> 
loading.. 
</div> 
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

If you have selected Post Pages Only option to No then put the generated required HTML code into conditional tags.

<b:if cond='data:blog.pageType == "item"'>
Generated required HTML
</b:if>

This ensures that it picks up correct related posts.

Step 5: Save your template.

Notes:

To have the thumbnails for your widget, your post images should be hosted on Picasa Web. For Bloggers who don’t know, when you write your post in Post Editor and add images from there, the image gets automatically uploaded to Picasa Web.

You can find more detailed options in:

• Project
• Plugin Options

If you are having any problem with this related post widget then ask Mr. More on his original post to get better answer.