Adding related posts widget in blogger great thing to reduce your blog bounce rate. If anyone reading your blog, they must find more related articles from your blog. But if there have no related things, they will exit your blog immediately. But you must stay them for a long time. Because it’s one of the great search engine ranking factor. In fact, that helps to increase your blog value as both the Domain Authority (DA) and Page Authority (PA).
Related Posts Widget in Blogger
In this step, you want to add blogger related posts after the content body. So just follow these step by step tutorial. You also see more blogger widgets here.
Step #1: Go to your blogger blog > Templates > Edit HTML
Step #2: Now search </head> (use Ctrl+F to search) and paste following code above/before the </head> tag:
<b:if cond=’data:blog.pageType == "item"’>
<style type=’text/css’>
#related-posts {margin: 12px 5px;background-color: #20DD71;}
#related-posts h2 {color: #FFFFFF;margin-bottom: 12px;left: 7px;top: 10px;font-family: Trebuchet ms;}
#related-posts a {font-size: 13px;color: #999;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #555;}
#about { float: right; font-size: 10px; }
#related-posts ul {list-style-type: none;margin: 0 0 0px 0;padding: 5px;}
#related-posts li {padding: 10px;border-bottom: 3px solid #eaeaea;background-color: #FFFFFF;}
</style>
<script type=’text/javascript’>
var relatedpoststitle="Related Posts:";
</script>
<script src=’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(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write(‘<h2>’+relatedpoststitle+’</h2>’)}document.write(‘<ul>’);while(i<relatedTitles.length&&i<20&&i<maxresults){document.write(‘<li><a href="’+relatedUrls[r]+’">’+relatedTitles[r]+’</a></li>’);if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write(‘</ul>’);relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}‘ type=’text/javascript’/>
</b:if>
Step #3: Now search again with <div class=’post-footer’> and you will see many times. You choose the 2nd one. Paste following code before it:
<b:if cond=’data:blog.pageType ==
"item"’><div id=’related-posts’> <b:loop
values=’data:post.labels’ var=’label’> <b:if
cond=’data:label.isLast != "true"’> </b:if>
<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=5"’ type=’text/javascript’/></b:if></b:loop><script type=’text/javascript’> var maxresults=5;
removeRelatedDuplicates();
printRelatedLabels("<data:post.url/>");
</script></div></b:if>
Step #4: Now save your Template and finally you completed all your activities. Now after posts, related posts will show. Make sure that, you filtered every post with a label, otherwise it not shown.
Blogspot related posts most important thing to reduce bounce rate, increase on page score and take readers for a long time.
