Create Related Post Widget for Blogger

How to create a related post widget for blogger

This related post widget will display thumbnails and snippet text just below your post.  The widget will display any related post with the same labels.



The related post widget will only take two main simple steps.

Go to your Blogger dashboard / Templates / Edit HTML and tick Expand Widget Templates

Find this tag, tip, use Ctrl f to search

</head>

And replace with

<!--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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaDIiQWfZuC_ZdFH_f6wK2IcciAjtOtLFJBwieg4H3eqLlBxYBixP2ttj2SHCnlWTU5MkDbSLSfVihhjuTbfeHmKmLvaRTDyDwgTDMeBXmCpgOvpoKYe-Vcjn6W77cX5ARcHHOU5fwuM3h/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-->
</head>

To change the default image replace the URL in red with your own.  Also edit var maxresults=5; for the amount of related post you want.  You can change the title text by editing this line.

var relatedpoststitle=&quot;Related Posts&quot;;

Now find this line of code, remember to use Ctrl f

<div class='post-footer'>

Now place the code snippet immediately befor the above line

<!-- 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://www.helpfulbloggertips.com/'><img alt='Helpful Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8cQ2BO1crW9iYuRRvaES__jx32QLN2GJqNVLQvloxxKsWTXfF6CXCmc94OjHgoxez2MJHZRckzdYbU1w9BM4qvwlulsYZSpBv0JrsDckLcEUdSVSCFNpuF6jYzDg3YYHDNCshIwEThmNb/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

To edit the number of related post to display just edit maxresults=6; to any number to fit your blogs theme.
You can also display the related post on your home page, just remove the code in blue.
You should now have a working related post widget for your blog, you can also edit the look and feel by editing the cascading style sheet.  If you have problems please comment below or contact me and I'll be glad to help.  Good luck and have fun.

Credit to helplogger.blogspot.co.uk edited by www.helpfulbloggertips.com