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.Hotbizplanet.blogspot.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='"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>You Can Also 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>
=> From the above code, you can change "You Can Also Read" to "Must Read " or "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 == "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>
5.) After the above action, you can now click to SAVE the template. Now tell me, how does it look? :)
