How To Add Related Posts Widget To Blogger with Thumbnails

Related Posts with Thumbnail Blogger Widget

It is very simple to add this widget into your blog. Just follow the steps published below:

• Firstly backup your Blogger blog’s template.
• Then click on the Edit HTML to edit your blog’s template in the text editor.
• Find the below given code (Use Ctrl + F):

]]></b:skin>

 

• Copy and Paste the below given codes just above the founded code.

<!--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-text {
font-size: 0.9em !important;
font-weight: 700 !important;
line-height: 1.45em !important;
font-family: Helvetica,Arial,sans-serif !important;
width: 100px;
padding-left: 3px;
height: 105px;
border: 0pt none;
margin: 3px 0pt 0pt;
}
#related-posts h2{
font-family:verdana !important;
font-size:18px !important;
font-weight:bold;
margin:9px 0px !important;
color:#666 !important;
border-bottom:0px !important;
border-top:0px !important;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
  }
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<!-- www.hififun.net -->
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK8V37ehwZMBi28pAGG21dZo3ghhNbXTG6lt3LINohj73nrAW79n75BFfGYnSihEm9vs3BO_oUnAzXoMvYlRbpKQYmYwx1vdvGQybFnZoE8at5xRSOBAdt60wlED6ipHhJgLCyY12EnjU/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;You Might Also Like:&quot;;
</script>
<script src='https://googledrive.com/host/0B-dv4rsl5_uZXzg0Z1FOVWhLSFk' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

• After that find this code:

<data:post.body/>

• Place the code given below just below it to show related posts after your blog post.

<!-- 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>
  <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>
<!-- www.hififun.net -->
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
    </div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.hififun.com'><img alt='Real Tips and Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIoro2vYtCwUdkb1CFtyBu4eMb9dPXHgzMB1ni6VlgMuZyB5_2lH1GKmoUMmonYWHqkVkh-lvqhAl6v2UTQIBaHrf_bSUbQFwOrYdf-TtQmkMwAQy7A4PErCvMQ6NBOhpMzEgensAdgkvQ/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
    <!-- Related Posts with Thumbnails Code End-->

• Save your template by clicking on the Save button.
• Done! enjoy your post........................... Thanks !!!