By this time every blogger use related post widget to represent more related sources to their readers. Using related post widget under every blog post is very important for several cases. So in this article, I will show you how to add related post widget for blogger blog. I will also provide a beautiful responsive related post widget with a thumbnail.
As I was telling that related post is very import for many reasons. Like:
User Engagement: If you show Related Posts under your every blog post then user get the chance to get more related sources of your site. The user gets the opportunity to visit more related topics on your site. This activity increases user engagement of your site.
User Engagement: If you show Related Posts under your every blog post then user get the chance to get more related sources of your site. The user gets the opportunity to visit more related topics on your site. This activity increases user engagement of your site.
Increase Page Views: If people click on any related post founded under the post, you get an extra page view for your site.
Decrease Bounce Rate: If you receive more page views that means your website’s overall bounce rate will decrease. This is very important for SEO.
Internal Linking: Internal linking is another important SEO factor. By using related post widget in your blogger blog, you are doing some great automated Internal Linking. Which is great for both readers and SEO.
Screenshot:
Related Post Widget For Blogger With Thumbnail:
We have already known some importance of related posts. So now let’s see the process to add it under every blogger post. By default, blogger doesn’t provide related post widget. That’s why I have designed this widget for you.
Step 1. Sign into the blogger dashboard. Click on the Overview > Template section. Now click on the “Edit HTML” button as shown below: (Note: Before editing you should keep a blogger template backup)
Step 2. Now find the ending “</head>” tag. You can search the code by pressing Ctrl+f. Now Paste the Script right above the “</head>”.
Code:
<!-- Related Posts widget with Thumbnails Code Before Head Start-->
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var borelatedTitles=new Array();var rboTitlesNum=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];borelatedTitles[rboTitlesNum]=entry.title.$t;try{thumburl[rboTitlesNum]=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[rboTitlesNum]=d}else thumburl[rboTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwp_S8U5M5qFX4iA6pfYhepdkBz-W50ujeE1DiyhSL0oifDTTsc84wL1FjgLre0z3x6S-z5QAfjP7bwzFCLDLWl0GJp47C3O5MAHC1KbFrr_RVlPj8D7iKE3n3kBFMw2SrXB7eQFsNwMPH/s1600/bo-related-post-no-thumbnail.png'}if(borelatedTitles[rboTitlesNum].length>35)borelatedTitles[rboTitlesNum]=borelatedTitles[rboTitlesNum].substring(0,45)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[rboTitlesNum]=entry.link[k].href;rboTitlesNum++}}}}function removeDuplicate_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]=borelatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}borelatedTitles=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 printRelatedLabel_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==findcurrentposturl)||(!(borelatedTitles[i]))){relatedUrls.splice(i,1);borelatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((borelatedTitles.length-1)*Math.random());var i=0;if(borelatedTitles.length>0)document.write('<h4><span>'+titleofrelatedpost+'</span></h4>');document.write('<sl class="related-posts-list">');while(i<borelatedTitles.length&&i<20&&i<maxpost){document.write('<ci><a href="'+relatedUrls[r]+'"><span class="rthumb"><img class="related_img" src="'+thumburl[r]+'"/></span><p><span class="related-title">'+borelatedTitles[r]+'</span></p></a></ci>');if(r<borelatedTitles.length-1){r++}else{r=0}i++}document.write('</sl>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);borelatedTitles.splice(0,borelatedTitles.length)}//]]></script>
</b:if>
<!-- Related Posts widget with Thumbnails Code Before Head Ends-->
Step 3. Now search for another line which looks like “<div class=’post-footer’>”. Now copy the below code and paste it right above this line.
Code:
<!-- Related Posts widget with Thumbnails Code Before Post Footer 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=7"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var findcurrentposturl="<data:post.url/>";
var maxpost=6;
var titleofrelatedpost="<b>Related Posts</b>";
removeDuplicate_thumbs();
printRelatedLabel_thumbs();
</script>
</div>
</b:if>
<!-- Related Posts widget with Thumbnails Code Before Post Footer Ends-->
Customization:
You can increase or decrease the highlighted number “6” to control the number of related posts will be shown under your blog post.
You can rename the related post widget’s title by renaming the highlighted “Related Post”.
You can increase or decrease the highlighted number “6” to control the number of related posts will be shown under your blog post.
You can rename the related post widget’s title by renaming the highlighted “Related Post”.
Adding the CSS Code of Related Post Widget:
Step 4. You have added the related post widget for your blogger blog. Now it is time to customize it. Find the CSS part of the blogger template. The code will look like:
<b:skin>…. </b:skin>
Click on the black arrow to expand CSS. Copy the below code and paste it right above “]]></b:skin>”. Everything is done. Now click on the “Save Template” button as shown in the screenshot.
Code:
/* CSS For related post widget
----------------------------------------------- */
#related-posts {float:left;width:101%;}
#related-posts sl{margin:0 !important;padding:0 !important;}
#related-posts h4{text-align:center;margin:10px 0px 20px;font:18px Oswald;color:#696868;text-transform:uppercase}
.related-posts-list ci{background-color:#fff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:27%;float:left;position:relative;margin:0 3% 3% 0;padding:2%;}
.related-posts-list ci:nth-child(3n){margin-right:0 !important;}
#related-posts a{color:#696868;font:400 12px 'Oswald',sans-serif;text-decoration:none;}
#related-posts sl ci p{margin-bottom:0;padding-top:1px;}
#related-posts .related_img{height:64px;margin-bottom:0;width:64px;object-fit:cover;}
.related-title{text-align:center;padding:5px 0px;}.rthumb{float:left;margin-right:10px;}
You have successfully added the related post widget in your blogger blog. If you like this widget then share it. If there is any problem through adding this widget in your blog then let me know by leaving a comment. I will get back to you very soon.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon