How to add related post widget in blogger is one of the most asked queries by the newbie. In blogger templates, there is no related post gadget. But we can add this widget manually.
Related post widget is a part of internal link building. It helps to increase page view. By this, our bounce rate decreases. A lot of designs of related post widget is present. But the related post with a thumbnail, list style related post and colored related post widgets are trending nowadays.
Here I am sharing a lot of design with demo images. You can pick up your best design for the related post. It depends on you.
Why Related Post Widget Is Important?
In the history of blogger hack, it was the greatest hack by pro blogger. In default blogger theme there is no related post widget is available.
Related post widget helps us to create consistent viewer or reader for our blog. Let’s take an example >
A visitor searched a query on a search engine and opens your blog. After reading whole content, he will leave your blog. Because there is no related content on that page. Hence you can imagine that how much this widget is necessary.
There are following benefits of this widgets
- It works as a part of internal link building.
- Its decrease bounces rate of the blog.
- This widget{Related Post} convert organic traffic into regular.
- Its improve conversation rate. As a result in good revenue.
Now our main topic is how to add this widget.
Must Read: How to create Viral Website?
How to add a related post in blogger
I am giving you to step by step guide for adding this plugin. You have to follow these steps.
Step:1 Login To Blogger.com
We need to blogger dashboard. You can follow this link to login.
Step:2 Navigate Template >> Edit HTML
After login, Select Template option from the left sidebar. You will see another screen like this.
Add Related Post widget in Blogger
Now Navigate Edit HTML option.
Step: 3 Add Related Post Stylesheet
you have to add Related post stylesheet in blogger template. Seach { Use CTRL+F}
</head>
Add below codes before head section.
<!–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 h2 { margin-top: 10px; background:none;padding:3px; } #related-posts .related_img { margin:5px; border:4px solid #f2f2f2; width:105px;height:105px; transition:all 300ms ease-in-out; -webkit-transition:all 300ms ease-in-out; -moz-transition:all 300ms ease-in-out; -o-transition:all 300ms ease-in-out; -ms-transition:all 300ms ease-in-out; } #related-title { color: #222; line-height: 16px; padding: 0 10px; text-align: center; text-shadow: 0 2px 2px #fff; width: 100px; } #related-posts .related_img:hover{ opacity:.7; filter:alpha(opacity=70); -moz-opacity:.7; -khtml-opacity:.7 } #related-title:hover { text-decoration: underline; } </style> <script type=’text/javascript’> //<![CDATA[ imgr=new Array();imgr[0]=”http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png”;showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split(“<“);for(var i=0;i<s.length;i++){if(s[i].indexOf(“>”)!=-1){s[i]=s[i].substring(s[i].indexOf(“>”)+1,s[i].length)}}s=s.join(“”);s=s.substring(0,chop-1);return s} function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel==’alternate’){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel==’replies’&&entry.link[k].type==’text/html’){pcm=entry.link[k].title.split(” “)[0];break}}if(“content”in entry){var postcontent=entry.content.$t}else if(“summary”in entry){var postcontent=entry.summary.$t}else var postcontent=””;postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=””))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=[“Jan”,”Feb”,”Mar”,”Apr”,”May”,”Jun”,”Jul”,”Aug”,”Sep”,”Oct”,”Nov”,”Dec”];var day=postdate.split(“-“)[2].substring(0,2);var m=postdate.split(“-“)[1];var y=postdate.split(“-“)[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+’ ‘+m+’ ‘+y;pcm='<a href=”‘+posturl+'”>’+pcm+’ comments</a>’;var trtd='<div class=”col_maskolis”><h2 class=”posttitle”><a href=”‘+posturl+'”>’+posttitle+'</a></h2><a href=”‘+posturl+'”><img class=”related_img” src=”‘+img[i]+'”/></a><div class=”clear”></div></div>’;document.write(trtd);j++}}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]=’http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png’}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(‘<h2>’+relatedpoststitle+'</h2>’);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–>
Step:4 Add Related Post With Thumbnail
In Blogger HTML Editor Search for
<div class=’post-footer’>
Add below codes before above codes.
Must Read: Kontent Machine discount.
<!– 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> <b:if cond=’data:blog.pageType == "item"’> <script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"’ type=’text/javascript’/></b:if></b:loop> <script type=’text/javascript’> var currentposturl="<data:post.url/>"; var maxresults=6; var relatedpoststitle="<b>Related Posts:</b>"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> </b:if> <!– Related Posts with Thumbnails Code End–>
Step: 5 Save
After adding above codes click save button.
Congrats, You have added Related post widget with the thumbnail in your blogger template.
Thanks.
