How To Add Random Auto Related Post Links In Blogger Posts

Must Read

In today's search engine optimisation world, there are a lot of things to put in place to get high website page rank. And also, for those who have monetized their blog or website with Google  Adsense or affiliate programs, there is need for increased page views or click-through rates. Also, there is also need to improve the internal links in your website or blog for better seo. For this reasons, Copytheweb.com has decided to share this useful blogger widget. Random auto related post links in your blog posts is a very good way to keep your readers engaged. 





Many of you are familiar with the regular Related Post Widget that appears fixed below your blogger posts body and above the comment box. In this case, the widget will not be in a fixed position but will appear anywhere within your blog posts at random. Example can be found in any of the Copytheweb.com articles. It is also a good way to promote other interesting similar contents to a targeted audience. 

How To Display The Automatic Related Posts Widget In Post Body At Random 

Below are steps to follow for the implementation of the widgets in Blogger templates. 

1.) Visit https://www.blogger.com and login to your account. From the left sidebar, click the TEMPLATE >>BACKUP to backup your blog and then >> EDIT TEMPLATE. In the next page  click any part of the template and click CTRL + F to open a search box. 


2.) In the search box, search for ]]></b:skin> . Just above  ]]></b:skin> ,you should paste the below CSS code:  

/*Auto Related Post By www.Copytheweb.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}



3.) Click CTRL + F again to search for this code <data:post.body/> . Depending on the type of blogger template you are using on your blog, you might find above code appear  2 or 3 times. In this case, we are using only two but if it doesn't work, you might have to use the third line of code too. Now change  <data:post.body/> with the below code. Repeat this with the same second code, which is the second line of 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>  

=> From the above code, you can change "Must Read " to "Also Read" or any word you like. 

4.) Now search for the </head> tag and copy and paste below code just above or before </head>. 


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

5.) After the above action, you can now click to SAVE the template. Now tell me, how does it look? :)

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad


Wireless Earbuds Bluetooth 5.0 Mini Headphones Hi-Fi Stereo in-Ear Earphones Touch Control IPX5 Waterproof Headset with LED Display Built-in Mic for Sports Workout Gym