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.
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='"post1" + 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 == "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>
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 == "item"'>
<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.
Installation Steps:
Step #1. Go to
blogger account >
Template > edit
HTMLStep #2. Now Copy the below code and paste it before the
</head> tag.
<b:if cond='data:blog.pageType == "item"'>
<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='"post1" + 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 == "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>
Now Save your template Done.