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.
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.
Style #2.
Installation Steps:
Step #1. Go to blogger account > Template > edit HTML
Step #2. Now Copy the below code and paste it before the </head> tag.
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*/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.
.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}
<div expr:id='"post1" + data:post.id'/>Step .6 Now Look for </head> tag and copy the below code and paste it just before </head> tag.
<div class='post-bloggersstand'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Must Read</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
<b:if cond='data:blog.pageType == "item"'>Step .7 Now Save Your Template..Done !
<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>
Style #2.
Installation Steps:
Step #1. Go to blogger account > Template > edit HTML
Step #2. Now Copy the below code and paste it before the </head> tag.
<b:if cond='data:blog.pageType == "item"'>Step #3. Now Copy the Below Css code and paste it before ]]></b:skin> or </style>
<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>
/* Bloggersstand Auto Related Post */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.
.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)}}
<div expr:id='"post1" + data:post.id'/>Now Save your template Done.
<div class='bsd-related'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Must Read :</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
