Related Posts With Thumbnail After Post On Blogger

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

Related post widget at the end of the posts or articles is very effective to increase pageviews. when a reader from search engines make the end of your article he/she get out of your blog as usual but if you install a "related posts with thumbnail widget" under the every post of your blog, your readers may access some related articles from the widget.You can get more pageviews by this.It also decrease the bounce rate. Actually this gadget is installed after the article

EDU technology Related Posts With Thumbnail On Blogger

Follow the steps that how you add related posts with thumbnail at the end of any related post

1.First login to blogger and go to dashboard and click on the design

EDU technology Related Posts With Thumbnail On Blogger

2.Click on edit HTML

EDU technology Related Posts With Thumbnail On Blogger

3.Tick on expand widget template

4.Press CTRL+F and find the code

</head>

5.Then paste the code following code just before it

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

6.Now press CTRL+F and find the code

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

7. After that paste the following code just after it

<!-- 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://bloggertipsandtemplates.blogspot.com/2009/09/related-posts-with-thumbnails-for.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://bloggertipsandtemplates.blogspot.com/' 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-->

8.Now save the template and open any post then you will find related post with thumbnail widget

Default code enable 5 related post and title namely "related post" if you want to change title or number you can change customizing the code and its easy.You can increase it by changing this code var maxresults=5; (Just change the number)

If you getting problem please comment here or contact with us and thank you