Steps On How I Added Related Posts or Article Widget To Blogger Blog

Too Many readers of a blog will spend more time on our blog after reading a post, if they see more related posts. If you really want to increase the page views of your blog, then you must be
showing related posts or articleso under each post on your blog. In this post, I am sharing with you, how I added a widget/plugin to my blog , which displays list of related posts below each article or post on my Blogger blog.

The same related posts or article widget will show a new related posts section below your post. The related posts widget fetches the related posts from those posts having the same label as the current post.

How To Add Related Article Or Post Widget To Your Bloggers Blog 

Only to PC can do this. No android website browser can so this unless you make use of the top seven apps I use in editing my blog template.

To add the related posts widget you will have to follow the steps
below:.

==> Log in to your blogger dashboard
==> From there go to Layout  > Edit HTML and tick the expand your widget templates box (option on the right). If you are using new Blogger dashboard , go to Template > Edit HTML

==> Click inside the HTML and use CTRL+ F to  enable search box. Then in the search box, find </head>

==> Right above </head> , paste the code below.

<!--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.horlartechgist.com/2016/09/
steps-on-how-i-added-related-posts-or.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-->

Like below Snapshot

Then Click on Save template

Now use CTRL+F to find this line of code

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

OR

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

Now paste the code below immediately after any of these lines (whichever you could find):

Note : In each of above codes you might find two I will advise you to use the second of one. In order for your related post to display. E.g is you find below code, 

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

paste the below given code under above code :

<!-- Related Posts 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=5&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-->

Click on Save Template. 

Now, go ahead to view one of your blog posts. You should see the Related posts below it.

Note : If you did not add a label (category) to a post, you might not see the related posts below it.

You can alter the CSS rules if you want to customize the look and feel Feel free to share your recommendations or or questions via the comment form. Sourced From Ogbongeblog.com