Monday, 14 December 2015

How to Add Related Post Widget with Thumbnails Below Every Post on Blogger

Adding Related post widget with thumbnails below/under every post you published in your blog is a good widget all bloggers ought to have on their blog because it help to increase page views & readership while your blog traffic low rate will decrease gradually. As a blogger or someone that have blog, I will advise you strongly to add Related Post Widget below every post you published.


How can I add Related Posts Widget with Thumbnails to my blog?
Follow the steps below


Step 1:  Log in to your Blogger Dashboard >> Navigate to Template >> Click Edit Html >> Click Anywhere inside html box. From your keyboard, use (CTRL+F) to find in your templates </head>

Step 2:  Paste the code below before the closing tag </head>.

<!--Related Posts Scripts and Styles Start-->
<style>
#related-posts {
float : left;
width : 350px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
document.write('<a href="http://www.entertaintechnews.com/2015/12/how-to-add-related-post-widget-with.html" target="_blank" rel="nofollow"><font size="1" color="black">[Get Related Posts Widget for Your Blog]</font></a>');
}
//]]>
</script>
<!--Related Posts Scripts and Styles End-->

Step 3:  Now find again (i.e use CTRL+F), any of this code in your template:

<div class='post-footer'> 


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

Now Before any of these lines (whichever you could find) place the code snippet below
<!-- 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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="
http://www.entertaintechnews.com/2015/12/how-to-add-related-post-widget-with.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


Step 4:  Widget Configuration
1. If you want to change the total number of posts to display in your blog posts, Edit the following line of code. Carefully find this html code below in Step 2 above.
var maxresults=5;
2. Also to Edit the title of the widget, change the following line of code below.
var relatedpoststitle="Related Posts";

Step 5:  Now Click Save template to Save your template.
That’s all.


Note: The above trick is something you will do once and each time you publish your post, Related Post will automatically show/display at the end of that post you published. Follow the trick well; it will work for you because it worked for me, as you can see it below this post.


Update! If you are unable to see the related posts widget after saving the template, add the code (step 5) just above the </b:includable> tag which can be found above this line (CTRL + F to find it): <b:includable id='postQuickEdit' var='post'>


I hope you like this post.
Kindly use the share buttons, Like and send button to share and send this post to your friend. They will surely appreciate it.

No comments:

Post a Comment

Are you Confused? Feel free to ask.
Your feedback is highly appreciated. I will try to reply to your queries as soon as possible. Drop in Your Comments, Problems, Suggestions, Praises BUT DONT Spam. Enjoy!!. THANKS