Related Posts with Thumbnails widget for Blogger

Yet another awesome Related Posts widget by Aneesh of Blogger Plugins, a seasoned author of widgets for the huge Blogger community! This one is real cool with thumbnails for extra visibility, like that of LinkWithin. Though every one of these widgets serves the same function to bring forth related posts for your readers' further interest or absorption and probably an increase in site's traffic, I personally prefer Aneesh's to LinkWithin's feature for the various reasons:

• the thumbnails' size is cuter, not overly large
• you can easily customize the widget yourself to display as you fancy
• the number of related posts can be decreased or increased beyond the default 5. Experimented successfully with 10 and more! :-)
• traffic is not directed elsewhere when thumbnails are clicked, so download speed of blog's contents is not hampered. Different from LinkWithin that directs traffic to its own site before redirecting back to our site, and thus slows down page download.

If you're interested, simply follow these easy steps on
how-to install the Related Posts with thumbnails widget :
(script code replicated from Aneesh's tutorial at Blogger Plugins. Thanks and God bless you, Aneesh!)

1. First, ensure these 3 criteria are met to enable this widget to work:
   a) should label all your posts as the widget fetches related posts bearing the same label with the current entry;
   b) should have posted images in your posts for best display, otherwise the default image will be shown instead;
   c) should have enabled your blog's feeds at Settings --> Site Feed.
   
   
2. Sign in to your Blogger account. At Dashboard, click Design | Edit HTML. Before editing your blog's template, it's advisable to do a backup of it first, by clicking Download Full Template. Then, make sure that you check the Expand Widget Templates box, located on the right.
   
   
   
   
3. Next, use the browser's search function (press Ctrl+F keys) to find the following code: </head> and replace it with the following code snippet :
   
   
   <!--Related Posts with thumbnails Scripts and Styles Start-->
   <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
   <style type="text/css">
   #related-posts {
   float:center;
   text-transform:none;
   height:100%;
   min-height:100%;
   padding-top:5px;
   padding-left:5px;
   }
   
   #related-posts h2{
   font-size: 1.6em;
   font-weight: bold;
   color: black;
   font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
   margin-bottom: 0.75em;
   margin-top: 0em;
   padding-top: 0em;
   }
   #related-posts a{
   color:black;
   }
   #related-posts a:hover{
   color:black;
   }
   
   #related-posts a:hover {
   background-color:#d4eaf2;
   }
   </style>
   <script type='text/javascript'>
   var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh54pVTezXm7Af45GQe_RGn2AH_45Qbs35DSboXdZqODSbGMaYTfUb8d9WB_GMQYDyDYQzhDNhwBP6LHuy8itIJ-GBmBtfGRKGEftIcWOmFuB60WeZOQAzjJ2VIgOuS9dg0zFS0bGDbk-4/s400/noimage.png";
   var maxresults=5;
   var splittercolor="#d4eaf2";
   var relatedpoststitle="Related Posts";
   </script>
   <script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
   <!-- remove --></b:if>
   <!--Related Posts with thumbnails Scripts and Styles End-->
   </head>
   
   
4. Next, find this line of code: <div class='post-footer'> and place immediately below it, the following code snippet :
   
   
   <!-- Related Posts with Thumbnails Code Start-->
   <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='related-posts'>
   <b:loop values='data:post.labels' var='label'>
   <b:if cond='data:label.isLast != &quot;true&quot;'>
   </b:if>
   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
   <script type='text/javascript'>
   removeRelatedDuplicates_thumbs();
   printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
   </script>
   </div><div style='clear:both'/>
   <!-- remove --></b:if>
   <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
   <a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
   </b:if></b:if>
   <!-- Related Posts with Thumbnails Code End-->
   
   
5. Usually, you will click Preview to see the changes but take note that somehow the changes wouldn't show up in the preview for this widget (is it because it's designed not to appear on the homepage by default, I wonder?). So, best to check again that your additions are correctly placed to be doubly sure. Then only, click Save Template and View Blog.
   
   
6. That's all to it! The image below shows how the Related Posts widget would appear, resulting from Aneesh's script code above. It will appear only on the posts' pages. If you want it to appear on the homepage as well, you have to customize the widget following step 6 below (do this after you've COMPLETED ALL THE STEPS ABOVE)
   
   

Truly a fantastic Related Posts widget with thumbnails which can be easily customized by yourself to suit your style! Some changes were made in mine as seen below where the widget's title and fonts were changed and spacing between thumbnails increased, to name a few!




Widget Customization
To configure your widget, you need to go back to the above codes at Design --> Edit HTML (remember to check the Expand Widget Templates box) and make the necessary edits, such as :

1. To change the title of the widget, find var relatedpoststitle="Related Posts";
   and replace the words, Related Posts with whatever you like.
   
   
2. To change the colour of the splitter line, find var splittercolor=#d4eaf2";
   and edit the color code. Best to use the colour of your post background if you wish the line invisible.
   
   
3. To adjust the number of related posts to show, find var maxresults=5;
   and edit the value.
   
   
4. To adjust the space between thumbnails, find #related-posts a{
   and add: margin: 0px 3px below it. The value 3px is for left and right margins, you can increase or decrease as wish.
   
   
5. To change and restyle the fonts, margins and others, you will need to modify the relevant CSS. Learn more about CSS styling at W3Schools, one of my favourite resource center!
   
   
6. To display the Related Posts on every page, that is, the post pages plus the homepage as well, find and remove these 2 lines from both the script code at Steps 3 and 4 above :
   <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
   and
   <!-- remove --></b:if>
   
   
7. To edit the default thumbnail which is the image displayed when your post has no image, replace the URL that appear after this line of code:
   var defaultnoimage=" to the URL of your own created image.

Hope this tutorial had been helpful and put a smile on your face!

Keep learning~~keep smiling~~keep sharing!!

Update 11/02/2013: According to the author, Aneesh of B.Widgets,
if the script is no longer working, you have to change:
http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js
(the above code is found at Step 3 of my tutorial above)
To
http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js