Using Related Post in Blogger to increase page views and improve SEO
Are you looking for various ways through which you can add related posts widget or related posts function to your blogger blog if yes then this post might help you in a better way I have seen that blogger does not offer related post featured in that platform however there are various scripting feature through which we can add a related post function to our blog
Related post helps a blogger blog in many ways let's count a few feature of these:
First of all related post will increase the engagement with the blog post. Is the reader reeds the post he will go through the other post of similar nature given in the related post section after that other benefits are also very helpful to blogger blog such as it will increase the page views of your website. Related post works is linking of your posts with the other similar posts hence it improves the SEO of your website. Related post also makes it easy for The Reader to find similar content on your website and also allow him to get benefited as much as he can. You know that it is not possible for us to show all our posts at one place it will be very difficult for The Reader to find all posts of similar nature so by using related post feature we can show our readers all short of data which are helpful to them. Another important thing to note here is that whenever a new reader comes to our website the very first time we cannot let him go without favouring the help which he Seeks from us. There is a very bed term such as Bounce rate. Bounce rate is nothing but a feature which tells us that how many people are not getting interested with our content and they leave our site within a fraction of second. So Bounce rate is a thing which we need to minimize as much as possible because the higher the bounce rate the more people we can count as not interested. Related post here does a very efficient work. It will increase the engagement of reader to our content. Which will automatically brings down the bounce rate hence good for our website.
We have seen that WordPress is providing the related post feature by using lots of plugins available to the writers. But blogger is not offering the same. Hence, we have to add this feature by using certain piece of codes.
Now we will see how to add that piece of code to use related post feature in our blog and that is very easy steps to follow.
Here, you will have to follow certain steps to add related post feature script to your website, so that you can easily increase the traffic and improve the SEO of your website.
First step:
First of all you need to go to the blogger dashboard. Now click on themes. After that click on edit. Now you are on the theme editor. (Please use it cautiously because if if you mess up with something you may damage your blog template. I recommend you to take a backup of your template so that if any uncertainty happens you may recover your blog template from there).
Second Step:
Press Ctrl + F and search for </head> tag.
Third Step :
Copy the below code and paste it above the </head> tag.
Here, few things to note :
1. If you want to show the related post widget on homepage as well as on post page, then remove the code highlighted in Red colour.
2. If you want to change the size, colour of the text displayed, edit the tags in Green colour.
Fourth Step :
Now, you need to press Ctrl + F again and search for the line of code given below.
Second Step:
Press Ctrl + F and search for </head> tag.
Third Step :
Copy the below code and paste it above the </head> tag.
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqPph_XEaw880mCmOHF3q8-uoJf-Y7XWdfB_o90NroKwXbbAudHHeDKcxSGWiAiAht3oOYpJK9MD3ukK9O1qcGFyHGA0T195JOxWbKyWozUd8V2lRr82OvNbvWWsrWQcUgLwUDOKFE47-y/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Here, few things to note :
1. If you want to show the related post widget on homepage as well as on post page, then remove the code highlighted in Red colour.
2. If you want to change the size, colour of the text displayed, edit the tags in Green colour.
Fourth Step :
Now, you need to press Ctrl + F again and search for the line of code given below.
<div class='post-footer'>
Fifth Step:
Now you have to copy the below given code and paste it above the "post-footer" code.
<!-- Related Posts with Thumbnails Code Start-->
<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>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Few points to remember:
1. Change the value from "5" to your desired number. This is the number which allows such number of posts to be displayed.
2. If you want to show the related post widget on homepage as well as on post page, then remove the code highlighted in Red colour.
That's it.
Sixth Step:
Now, click on Save button above and preview your blog. It must be enriched with Related posts widget below every post or on every page as per your preferences.
That's it! This was an easy tutorial on how to add Related Posts in Blogger to increase page views and improve the SEO of your blogger website. I would request you to keep the related posts number to maximum of 6 because more related posts will divert the attention of the reader and may force him to move to other posts frequently. Hence, on the minimum side, keep it 3 - 5 on average basis. You can test the feature by keep changing the numbers and see which works well for you.
If have any issue or doubt regarding the code, please use the comment box below to put your comment. I will be happy to help.
If have any issue or doubt regarding the code, please use the comment box below to put your comment. I will be happy to help.
Comments
Post a Comment