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

By Vinod Suthersan → Wednesday, February 29, 2012
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!!!

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

Step 4ADDING CODE FOR WIDGET TO APPEAR:
Search for the below code:

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

Or

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

Note: if you find many <div class='post-footer-line post-footer-line-1'> codes, then choose the first one.

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 class='post-footer-line post-footer-line-1'> :
<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=4&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'/>
<br/>
</b:if>

Step 5. Save the template.

We are done...

CUSTOMIZATION:
1. Control the number of thumbnail related posts to display:
Change both the maxresults=4 and max-results=4 to 3, 5, 6 and so on.

2. To change the hover thumbnail background:
Change in the CSS code:
#related-posts  a:hover {
background-color:#cccccc;
}

to any other hexa-decimal value.

3. To Display the widget on home page as well:
Remove the if condition from step 4.
Remove:
<b:if cond='data:blog.pageType == &quot;item&quot;'> and
</b:if>

4. If you need any customizations/doubts in the widget, please let me know. I will modify the code accordingly and upload it.

Thanks for reading and trying the widget.
~iTechColumn
 
Karan Vyas

Karan Vyas is the founder at Itechcolumn.com, a 19 year old student pursuing his B.Tech in ECE.He is passionate blogger,Web Developer having vast knowledge on reverse engineering,hacking,software developement.Apart from this he is involved in witchcraft black magic and hypnotism.

No Comment to " How To Add 'You Might Also Like Widget' For Blogger Posts? "

Your comment here