Add Stylish Related Post Widget in Blogger

How to Add Related Post in Blogger

Hello Friendz Today I am Showing How to Add Related Post in Blogger. Related posts widget for blogger is a must have widget. This widget shows some related topic posts automatically under every individual post. This is very important to increase pageviews by every visitor. This related post widget also makes thinner the chance to get bounce.

How to Install Related Posts In Blog Posts

Go to Blogger> Template> Edit HTML> Put the code below just above the ]]> </ b: skin> or

</ style> code

/*RelatedPost*/
.post-terkait{display:block;position:relative;background:#fff;padding:0;margin:15px auto 20px;width:100%}.post-terkait h4{background:#07ACEC;padding:7px 10px;display:inline-block;font-size:12px;text-transform:uppercase;color:#fff;border-radius:3px;line-height:normal;border:0}.post-terkait h4:before{display:none}.post-terkait ul{margin:0;padding:0}.post-terkait ul li{list-style:none;padding:1px 0;line-height:1.5em}.post-terkait a{color:#07ACEC;font-size:13px}.post-terkait a:hover{color:#000;text-decoration:underline}

Then look up the  <data: post.body /> (second) or <div class = 'artbody' itemprop = 'ArticleBody description'> <data: post.body /> </ div> code

Delete the code and replace it with the code below:



<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='post-terkait'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4> Also Read </ h4>
<script type='text/javascript'>
removeRelatedDuplicatesundefined);
printRelatedLabels undefined);
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementByIdundefined&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementByIdundefined&quot;post2<data:post.id/>&quot;);
var s = obj1.innerHTML;
var t=s.substrundefined0,s.length/3);
var r=t.lastIndexOfundefined&quot;&lt;br&gt;&quot;);
ifundefinedr&gt;0) {obj0.innerHTML=s.substrundefined0,r);obj1.innerHTML=s.substrundefinedr+4);}
</script>

Then put the code below just above the </ head> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Arrayundefined); var relatedTitlesNum = 0; var relatedUrls = new Arrayundefined); function related_results_labelsundefinedjson) { for undefinedvar i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for undefinedvar k = 0; k < entry.link.length; k++) { if undefinedentry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicatesundefined) { var tmp = new Arrayundefined0); var tmp2 = new Arrayundefined0); forundefinedvar i = 0; i < relatedUrls.length; i++) { ifundefined!containsundefinedtmp, 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 containsundefineda, e) { forundefinedvar j = 0; j < a.length; j++) if undefineda[j]==e) return true; return false;} function printRelatedLabelsundefined) { var r = Math.floorundefinedundefinedrelatedTitles.length - 1) * Math.randomundefined)); var i = 0; document.writeundefined'<ul>'); while undefinedi < relatedTitles.length && i < 20) { document.writeundefined'<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if undefinedr < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.writeundefined'</ul>');}
//]]>
</script>
</b:if>

Save the template and See The result.