How to Put Related Articles (related posts)

Widget related articles (related posts) are accompanied by a thumbnail is indeed very similar to the widget from LinkWithin.ve Used LinkWithin? if not, my friend could see the example picture below, well that way about their shape.Each section will be highlighted in a complementary color when the mouse is hovering over it, and when all these parts at the click will lead to the URL of the "related posts" are displayed. Unlike LinkWithin that scrambles all the existing posts to be displayed, the widget is in accordance with label or category of our blog. Figure thumbnail is displayed for each relevant post thumbnail generated from the relevant post. Therefore, only the pictures that you upload to any blog post that will be displayed. Overall, I am very happy with this Aneesh artificial script, in addition to nice and neat, this script does not create a blog to be heavy.
Okay, straight to the site wrote. As always please login to Blogger. Sip! Now follow the steps below:
1.Now go Edit HTML.
2.Do not forget to backup your template first by clicking the Download Full Template.
3.Click Expand Widget Templates.
4.Then place the following code, right above the code</head>

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

5.Then locate the following code:
<div class='post-footer-line post-footer-line-1'>
or if not there, look for code like this:
<p class='post-footer-line post-footer-line-1'>

6.If you've met, then place the following code right after the code above:

<!-- 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 tutorials</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-->

7.After finishing all, do not forget Save Template.
To change the number of its related posts, please edit var maxresults = 5, replace the number 5 with the corresponding number width of your blog postings. As for changing the title of the related posts, please edit relatedpoststitle var = "Related Posts ", replace with a buddy want the title.

Hopefully useful ....... !