Blogger Widget: Related Post Wigdet for blogger

Related post is also one of the greatest blogger tool that increases visitors engagement like recent, random, popular post widget. Whatsapp has even came to blogger level which provided a widget that can chat with blogger support center.

Related posts widget is very important for a blog because it increases the number of page views and also helps the visitor to view other posts related to a blog post. I have being searching for this type of related post.

Don't mis my last post on the best pay per download platform
It displays post titles with little thumbnails nor snippet. As a result of that its fast loading, can display countless of post title, can show both in mobile and desktop view.
We called it related post so we put it right below every post on our blogs.

Step by step guide to add related post to blogger theme.


Log in to your blogger dashboardto => theme => Edit HTML

Press CTRL+ F to find </head>

Copy and paste the code below above the </head> tag.


<!--Prank related post widget-->
<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.zethag.com/2017/07/how-i-added-related-post-wigdet-to-both.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-->

Click save theme

Now you've done with the first hurdle


In the theme editor, press  CTRL+F to find this code line

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

Now paste the RELATED POST codes below the line above


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

Now paste the RELATED POST codes below the line above

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

Now paste the RELATED POST codes below the line above



<!--  RELATED POST with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


Now save the theme and preview both desktop and mobile mode.


If you have any questions or recommendation please feel free drop your question in the comment section.