How To Add 'You Might Also Like Widget' For Blogger Posts?

“How to add a “Related post widget/gadget” for Blogger?” Related post widget is an important part to decrease the bounce rate of your website. Today, we will add a custom designed widget which shows the related posts with their photo thumbnail.

Related post widget gives the users to go to the next post and next post and more when they see it below every post. It gives professionalism to the website. If you hate coding and don’t want to break your head implementing a related post widget to your HTML Blogger template, you can always go with ready made tools like “Linkwithin” and “nRelate”.

This tool is very similar to Linkwithin. Please go ahead and implement it for your blog.

IMPORTANT:
BACKUP THE TEMPLATE

Tutorial:
Step 1. Go to Blogger dashboard > Template > Edit HTML

Step 2ADDING JavsScript to HTML:
Search for </head>

Just before </head> add the following code:

<script type='text/javascript'>
var defaultnoimage=&quot;http://downloads.itechcolumn.com/home/thumbnail_img/no_image_thumbnail.jpg&quot;;
var maxresults=4;
var splittercolor=&quot;#000&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://itechcolumn.googlecode.com/files/blogger_thumbnail_plugin.js' type='text/javascript'/>

Done!!!

Search </head> and add the below code as you added JavaScript code in step 2: 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:#cccccc;
}

Search for the below code:

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

Or

<p class=’post-footer-line post-footer-line-1′>

Important: if you don’t find <div class=’post-footer-line post-footer-line-1′> look for a code with <div class=’post-footer-line post-footer-line-X‘> where is a number like 1, 2, 3 etc.

Paste the below code after <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;<script type='text/javascript'>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script></div><div style='clear:both'/><br/></b:if>