Related Post With Thumbnail Image for Blogger

I think you was look this widget before. Yes, this widget have same look with Linkwithin widget. But, this image not from LinkWithin. This widget come from BloggerPlugin. I was installed in my blog. And i hope this can help my visitor to exploring my article.Do you interesting to install this blogger widget in your own blog? It's an easy way to do.

Here are the detailed installation steps.....

• First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box.
• Now look for this code

  </head>

• Change that code into this one.

  
  <!--Related Posts with thumbnails Scripts and Styles Start-->
  <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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
  </b:if>
  <!--Related Posts with thumbnails Scripts and Styles End-->
  </head>

• Now find

  
  <div class='post-footer-line post-footer-line-1'>

• And then add this code

  
  <!-- 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>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <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:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
  <script type='text/javascript'>
  var currentposturl=&quot;<data:post.url/>&quot;;
  var maxresults=5;
  var relatedpoststitle="Related Posts";
  removeRelatedDuplicates_thumbs();
  printRelatedLabels_thumbs();
  </script>
  </div><div style='clear:both'/>
  </b:if>
  <!-- Related Posts with Thumbnails Code End-->

• Now you can adjust the maximum number of related posts being displayed by editing the red code.
• Now save your edited HTML Template

This widget will be show an image in our post for a thumbnail. When your post doesn't have any image, it will be show "No Image" picture as thumbnail.

Best Regard.
One-4-All | Blogging News and Tips