Latest News
Home » All Blogger Tips » Related Posts Widget Below every post For Blogger
web development, SEO services, Web designing

Related Posts Widget Below every post For Blogger

Related Posts Widget for blogger

Related post widget is a widget which does many works at a time. It reduces your blog’s bounce rate, helps in increasing traffic, increase visits and much more. So to do all this things at once we have made this widget for you. This widget will surely help you. This blogger widget blogspot helps a lot in increasing the CTR of page.

Now just follow the given steps to add this great related post widget to your blog:
Here is a screenshot of the widget:




DEMO of Related Post widget for blogger

Related Posts Widget for blogger

Steps To Add Related Post widget Below Every Post:

Here are the steps to add best related post widget for blogger:
Before these steps just make a backup of your template for precautions.
  • Log in to your Blogger Account.
  • Go to Templates >> Edit HTML.
  • Tick on Expand the Widget.
  • Find for ]]></b:skin> tag.
  • Paste the below code just above it.
#related-posts {float: left; width:612px;}#related-posts h3 {padding-left:5px;}

#related-posts .related_img {margin-left: 10px;margin-top: 10px;width:130px;height:90px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;border:1px solid #000000;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}

#related-posts .related_img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}

/* Related post by /*
  • Now, find for </head>  tag.
  • Paste the below code just above it.:
<b:if cond=’data:blog.url != data:blog.homepageUrl’><script type=’text/javascript’>


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]=’’}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+”…”;for(var k=0;k<;k++){if([k].rel==’alternate’){relatedUrls[relatedTitlesNum][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(‘<h3>’+relatedpoststitle+'</h3>’);document.write(‘<div style=”clear: both;”/>’);while(i<relatedTitles.length&&i<20&&i<maxresults){document.write(‘<a style=”text-decoration:none;margin:0 7px 10px 0;float:left;’);if(i!=0)document.write(‘”‘);else document.write(‘”‘);document.write(‘ href=”‘+relatedUrls[r]+'”><img src=”‘+thumburl[r]+'”/><br/><div style=”width:130px;padding: 5px 5px;color:#000000;height:35px;text-align:center;margin:0px 0px;  line-height:16px;”>’+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)}




  • Now, find for  <div class=’post-footer-line post-footer-line-1’/>
  • Now, paste the below code just below it.
  • Now, finally click on Save the Template.

Final Words.

So now you will have a working related post with thumbnail in your blog. I Hope You Like This New And Best Related Post Widget With Blogger. Happy Blogging..!!  In next post I will be talking about best related posts wordpress plugin.

If you have any problem just comment below and also leave your response behind.

About Author (GUEST POST)

This Post Was Written By Abdul Samad Essani. Who Is CEO & Founder At Blogger Techniches. Currently He Is Living In karachi, Pakistan & Studying in 7th Class. He Is A Pro Blogger And  Addicted Web Developer.

Originally posted 2013-07-19 07:18:00.

About Vishal Sharma

Hi`i' m +Vishal, a Search Engine optimizer, internet marketer, web designer, affiliate marketer & founder of this blog. I love to learn and share new things. For any query or help you can contact me at any time.


  1. Great post by You Abdul.. You are really a good blogger at this small age 😀

  2. wow!! young blood with gr8 passion 🙂

  3. Thanks Bro For This Of Words

  4. Thanks Sis Be In Touch For More Also Visit Our Site

  5. got some problm addin ths widget 🙁

  6. what's the problem K2 please tell me, hope I can solve it 🙂

  7. This Widget Is Working Properly If You Have Any Problem Then Tell Me I Will Solve

  8. If You Have Any Problem Then Please Tell Me I Will Solve

  9. Thanks Yes This Very Nice And Useful That's Why I Share This With You Guys Be In Touch For More Also Visit My Site

Leave a Reply

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.