20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Add Auto Related Post Widget In Blogger Post

Show related post after few lines auto inside blogger post.display automatically related post links widget between the blogger post.learn trick to add related post gadget in every blogger page at random place in blogspot template.
How To Add Auto Related Post Widget In Blogger Post
Hello Folks,Today in this article we are going to explain How to Add Auto related post links widget in blogger between post. However you guys are already using related post widget stick at same place.This blogger related post gadget plugin is different.When you add this tool you can see in every post related post widget display at random place means place is not fixed it will appear anywhere inside your blogger post.It will also increase the bounce rate of your website or blog, and a very nice way to keep engaged readers with your blogger related content and latest updates. Bloggersstand.com team has developed this unique widget for you.
There is also one benefit you guys will get after installing this auto related post widget inside the blogger post will increase the number of page views and also it will improve the internal links in your blog. To grab this  Automatic Related Post between few lines inside blogger post widget follow the steps mentioned below.  

How to add auto related post widget in every blog post at random place

installation steps:

Style #1. 

Step .1 Go to https://www.blogger.com and Sign in to your account.
Step .2 Now From Blogger Dashboard click on ->Template ->Edit HTML.
Step .3 Now Search For ]]></b:skin> In Your Template By Using CTRL+F Keys.
Step .4 Now Paste the following below CSS just above  ]]></b:skin> tag.
/*Auto Related Post By www.Bloggersstand.com*/
.post-bloggersstand{display:block;position:relative;background:#fff;padding:0;margin:15px auto 20px;width:100%}.post-bloggersstand h4{background:#FF3300;padding:7px 10px;display:inline-block;font-size:12px;text-transform:uppercase;color:#fff;border-radius:3px;line-height:normal;border:0}.post-bloggersstand h4:before{display:none}.post-bloggersstand ul{margin:0;padding:0}.post-bloggersstand ul li{list-style:none;padding:1px 0;line-height:1.5em}.post-bloggersstand a{color:#FF3300;font-size:13px}.post-bloggersstand a:hover{color:#000;text-decoration:underline}
Step .5 Now Search for the following tag <data:post.body/> you can find this tag 2 or 3 times but will stop at 2nd and if not work  we will choose 3rd and change with the below code.
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='post-bloggersstand'>
<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>Must Read</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</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.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
Step .6 Now Look for </head> tag and copy the below code and paste it just before </head> tag.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>');}
//]]>
</script>
  </b:if>
Step .7 Now Save Your Template..Done !

Style #2.


How to add related post between inside the blogger post

Installation Steps:

Step #1. Go to blogger accountTemplate  > edit HTML
Step #2. Now Copy the below code and paste it before the </head> tag.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var bsdrelated = new Array(); var bsdrelatedNum = 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]; bsdrelated[bsdrelatedNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[bsdrelatedNum] = entry.link[k].href; bsdrelatedNum++; 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] = bsdrelated[i];}} bsdrelated = 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((bsdrelated.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < bsdrelated.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + bsdrelated[r] + '</a></li>'); if (r < bsdrelated.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>
Step #3. Now Copy the Below Css code and paste it before ]]></b:skin> or </style>
/* Bloggersstand Auto Related Post */
.bsd-related{position:relative;padding:0;margin:15px auto;width:100%;}
.bsd-related h4{background:#768187;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.bsd-related ul{margin:0;padding:0}
.bsd-related ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.bsd-related ul li:nth-child(odd){background:#fefefe}
.bsd-related ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.bsd-related ul li:before{content:'\f005';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.bsd-related ul li:hover:before{content:'\f123';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.bsd-related a{color:#768187;font-size:14px;margin:0 0 0 20px;text-transform: capitalize;}
.bsd-related a:hover{color:#0383d9;text-decoration:underline}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
Step #4. Now Find <data:post.body/> and replace it with the below code.You will find it 3 times choose your position to appear related post in page.
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='bsd-related'>
<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>Must Read :</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
 Now Save your template Done.

2 comments

  1. Hello. The code worked but my post is dividing into two. how do i fix that please
  2. Fixed it. It worked thanks very much. This means much. I luv this site already