Blogger

How to Add Related Posts Widget in Blogger

Adding a blogger related post widget is a good thing to reduce your blog bounce rate. If anyone is reading your blog, they should get the most relevant articles from your blog. But if there are no related items, they will leave your blog immediately. But you have to keep them for a long time. Because it is one of the best search engines. In fact, that helps increase the value of your blog as both Domain Authority (DA) and Page Authority (PA).

Blogger Related Post Widget

In this step, you want to add a blogger-related post behind the content body. So just follow these tutorials step by step. And you can 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 == &quot;item&quot;’>
<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=&quot;Related Posts:&quot;;
</script>
<script src=’var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i&lt;json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k&lt;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&lt;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&lt;a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i&lt;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&gt;1){document.write(‘&lt;h2&gt;’+relatedpoststitle+’&lt;/h2&gt;’)}document.write(‘&lt;ul&gt;’);while(i&lt;relatedTitles.length&amp;&amp;i&lt;20&amp;&amp;i&lt;maxresults){document.write(‘&lt;li&gt;&lt;a href=&quot;’+relatedUrls[r]+’&quot;&gt;’+relatedTitles[r]+’&lt;/a&gt;&lt;/li&gt;’);if(r&lt;relatedTitles.length-1){r++}else{r=0}i++}document.write(‘&lt;/ul&gt;’);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 may times. You choose 2nd one. Paste following code before it:

<b:if cond=’data:blog.pageType ==
&quot;item&quot;’><div id=’related-posts’> <b:loop
values=’data:post.labels’ var=’label’> <b:if
cond=’data:label.isLast != &quot;true&quot;’> </b:if>
<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=5&quot;’ type=’text/javascript’/></b:if></b:loop>

<script type=’text/javascript’> var maxresults=5;
removeRelatedDuplicates();
printRelatedLabels(&quot;<data:post.url/>&quot;);
</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 posts with label, otherwise it not shown.

Blogspot related posts most important thing to reduce bounce rate, increase on page score and take readers for long time.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
DMCA.com Protection Status