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 2. ADDING JavsScript to HTML:
Search for </head>
Just before </head> add the following code:
<script type='text/javascript'>
var defaultnoimage="http://downloads.itechcolumn.com/home/thumbnail_img/no_image_thumbnail.jpg";
var maxresults=4;
var splittercolor="#000";
var relatedpoststitle="Related Posts";
</script>
<script src='http://itechcolumn.googlecode.com/files/blogger_thumbnail_plugin.js' type='text/javascript'/>Done!!!
Step 3. ADDING 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, “Times New Roman”, 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 4. ADDING 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 X 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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=4"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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.
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 == "item"'> 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
~iTechColumn
