Related Posts with thumbnails for blogger

Saturday, December 19, 2009

Simple related posts gadget is replaced by this new 'Related Posts with thumnails'. It has a feature of  displaying the thumbnails of images from the posts and attracts the users which results in increase of page views per user. This gadget is created by BloggerPlugins and is listed here.

Similar gadget is also available  from Linkwithin and is very simple to install in your blog. Finally, this gadget helps in retrieving all your stories from Blog Archieve.

To add this gadget to your blog go to > Layout > Edit HTML and search for </head> and add the below code above this tag.
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
#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{
#related-posts a:hover{
#related-posts  a:hover {
<script src='' type='text/javascript'/>
<!--Related Posts with thumbnails Scripts and Styles End-->
Now search for <div class='post-footer-line post-footer-line-1'> and add the below code after this tag.
<!-- Related Posts with Thumbnails Code Start-->
<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 cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot;   &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";removeRelatedDuplicates_thumbs();
</div><div style='clear:both'/>
<!-- Related Posts with Thumbnails Code End-->
Maximum number of posts displayed can be changed by changing the value in
  • var maxresults=5;
Title of the related posts can be changed from
  • var relatedpoststitle="Related Posts";
Find difficulty in adding the gadget to your blog ? Please post comments.

Subscribe to our blog

Do you have any Suggestions, add your comment. Please don't Spam!
If you like this site >> Subscribe to our feed


Post a Comment