Add related posts widget to blogger to increase page views

Related posts widget/plugins  is one thing you need to add to your blog so has to show readers some articles related to the one they are reading

This will  make people stay quite longer on your blog and your page views increase  and will generate income for you has a blogger expecially when you are using adsense ads between your posts

In the post, I'll be teaching you

How to add related posts widget/plugins on your blog 

Step 1:
Login to your Blogger dashboard

Step 2:
Go to template then click edit HTML

Step 3:
Click inside the HTML and use CTRL F to find  this

---

</head>

---

Step 4:
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY6HW0QBcWVCF6wE3UmwqdfgoFUunEahQNGPVaUTByaTS40892ByJ7z6CDQaAAUYZEPTZdmfZvIVAaOeMVZgPb0BKMbmDwk2qWtgEBvm9ty9Qbv1yz4VAi03CLby0xITOWWgZFoGZadcU/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://waplordcrib.com" 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 5:
Click save template 


Step 6:

Now use CTRL F to look for one of the below code (whichever one you find in your template)

---

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

---

                      OR

---

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

---

Step 7:
Now paste the code below immediately
after any of above code you find

---

<!-- 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


Important
You need to always add labels to your blog posts so that the script automatically select label that Is related to each other
 If you did not add a label (category) to a post, you might not see the related posts below it.

Feel free to share your recommendations or or questions via the comment form

About author
Crystalblogger is a professional blogger,a freelancer living a dot.com life ,he offers services based on blogging and writing you can contact him here at info@waplordcrib.com