Related Post Widgets for Blogger blogspot

Custom Related Post Widget For Blogger – With Thumbnail

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.

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 “”.

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/AVvXsEjugSfK08YKhiShd7XtjJ6A2vVh8qD_G_bzf7r8FQqTejjHDgvayOJWgTA9ptbT0HGfJ0lmRp9EHOsuxrZMBKWq-drK8G-1j0Mi1xB0KP4wCBkAQvRE7BgDe_U0foJ6ZuwI5wSEdgr3haQB/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.

<!-- 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”.

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:

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.