How To Add Related Posts Widget in Blogger Website With Thumbnails - Online Computer Training

It is good feature for showing other post to visitor. If any visitor visits any post in your blogger then they can see other post by “Related Post Widget” and they can find useful information in other Post in the Blogger. 

This is shortcut for showing other Post which is related to visitor looking. Here some codes available you have to just copy and paste in your Blogger template. Just follow few steps.

>> Log in to your Blogger

>> Dashboard

>> Template

>> Edit Html

>> Check “Expand Widget Template”

>> Now find this code

</head>

>> Paste this code before "</head>"

<!--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: 18px;
letter-spacing: 2px;font-weight:
 bold;text-transform: none;
color: #5D5D5D;font-family:
 Arial Narrow;margin-bottom: 0.75em;
margin-top: 0em;padding-top: 0em;}
#related-posts a{border-right:
 1px dotted #DDDDDD;color:#5D5D5D;}
#related-posts a:hover{color:black;
background-color:#EDEDEF;}
</style><script type='text/javascript'>
var defaultnoimage=&quot;
http://3.bp.blogspot.com/-
PpjfsStySz0/UF91FE7rxfI/
AAAAAAAACl8/092MmUHSFQ0/s1600/
no_image.jpg&quot;;var maxresults=5;
var splittercolor=&quot;
#DDDDDD&quot;;var
relatedpoststitle=&quot;
Related Posts&quot;;</script>
<script src=
'http://helplogger.googlecode.com/
svn/trunk/related-posts-with-big-thumbnails.js'
 type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails
Scripts and Styles End--> 

>> Now find this code again

<div class='post-footer'>

>> And Paste this code above search code

<!-- 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://onlinefreetip.blogspot.com'>
<img alt='Online Tips'
 src='http://3.bp.blogspot.com/-
K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/
dF84-alnOu4/s1600/best+blogger+tips.png'/>
</a></b:if></b:if>
<!-- Related Posts with 
Thumbnails Code End-->

>> Save this Template.

In this code your will  show number of Post 5 if you want to show more or less than 5 then you can change the highlighted code.