A Simple Related Posts Widget For Blogger

In the last tutorial, we have seen how to add the Related Posts widget that would show related posts with thumbnails from the same category, based on the given labels, which would appear just at the end of your blog posts. However, maybe some of you may prefer the simple version of this related posts widget that will display only the posts titles.

simple related posts widget

If you want to add it, follow the next steps below:

How to add Related Posts Widget to Blogger

Step 1. Go to 'Template' and hit the 'Edit HTML' button.

Step 2. Once the template editor opens, click anywhere inside the code area and press the CTRL + F keys, then type the following tag inside the search box (hit Enter to find it):
</head>
Step 3. Just above the </head> tag, paste this code:
<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#related-posts {
margin: 15px 0px;
}
#related-posts h2 {
font-size: 27px;
font-weight: normal;
color: #fff;
text-shadow: 1px 0px 2px #888;
margin-bottom: 0.75em;
}
#related-posts a {
font-size: 13px;
color: #949494;
text-transform: capitalize;
border-bottom:1px dotted #E2E2E2;
display:block;
padding:13px;
text-decoration: none;
}
#related-posts a:hover {
color: #555;
background: #F4F4F4;
}
#related-posts ul {
padding: 0px;
list-style-type: none;
background: #f9f9f9;
border-left: 5px solid #f2f2f2;
}
#related-posts li {
padding: 0px;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script></b:if>

Customizing Simple Related Posts widget for Blogger

- To change the size (27px) and color (#fff) of 'Related Posts' title, change the values in red.
- For the related post link color, replace the #949494 value in green.
- To change the background color, replace the #f9f9f9 hex color in red (you can use this Color code generator to pick your favourite color).
- For the background color on mouseover, change the #F4F4F4 value in red.

Step 4. Now find (CTRL + F) the line below:
<b:includable id='postQuickEdit' var='post'>
Step 5. When you find it, click the sideways arrow to expand the code and scroll down until you find </b:includable> - see the screenshot for more help:



Step 6. Just above </b:includable> paste the code below:
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a style="font-size: 9px; color: #CECECE; float: right;" href="http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html" rel="nofollow" >Simple Related Posts Widget</a></div></b:if>
Note: To change the number of maximum related posts for each label, change the "5" value from max-results=5

Step 7. Save the changes by clicking the 'Save Template' button and visit your blog - click any of your posts to see the simple related posts widget for Blogger live. Enjoy!

48 comments:

  1. Hi

    I tried the code but it didn't work with me , plz help
    www.umdeema.com

    thanks

    ReplyDelete
    Replies
    1. Hello,

      Add the same labels to your related posts, otherwise it's not working. Or you can try adding the code from step 5 after <data:post.body/>

      Good luck. And thanks for visiting!

      Delete
    2. Thanks a lot!!! :D

      Delete
  2. Wow...this was a great post. I have already implemented this code in my blog.

    ReplyDelete
  3. It worked for me! Thanks! Thanks and Thanks. Look at a glance- www.healthy24.net, simple but how nice!

    ReplyDelete
  4. Anonymous4/27/2012

    Great job. Thanks for sharing.

    ReplyDelete
  5. This is the shortest code I ever find for related post, thanks a lot for sharing this blogger SEO widget.

    ReplyDelete
  6. It doesn't work to my blog, I did what is your instructions but nothing happens. I have the same labels. linkwthin works but not yours.. please help!.

    ReplyDelete
    Replies
    1. Try to add the code from step 5 just after <data:post.body/> and see if it works. Sorry for the very belated answer..

      Delete
  7. Yeah Thanks... This is Work.. But Related Post With Thumbnail doesn't Work in my blog... Link Within doesn't Work too... Only This That Work in my blog, if you have a spare times, please tell me Why? :) ... THank You Very Much :)

    ReplyDelete
  8. Rafeeq7/14/2012

    Thanks its working nice.But the title "Related posts" is not showing up

    ReplyDelete
  9. mantap... very nice blog... a have doing it..

    ReplyDelete
  10. working excellentely thanks a lot.
    I was looking for such an easy tutorial from a long time your one is really very good.

    ReplyDelete
  11. Hi, I don't have either of the Step 4 lines in my template html - is there another line I can look for? Thank you!!

    ReplyDelete
  12. working excellentely thanks a lot.

    ReplyDelete
  13. Doesn't work for me at all. Tried both setups would you be able to help me out? Thanks!

    ReplyDelete
  14. Hmmm.. NIce it's really simple.

    ReplyDelete
  15. Hi,İ did it but did not appear as I wanted,could you pls help me

    ReplyDelete
  16. Dosent find the code div class='post-footer'

    ReplyDelete
  17. works cool great tutorial for related post works perfectly

    ReplyDelete
  18. Nice, though I'm trying to figure out on which labels it's based on. Thanks! allsignlanguage.blogspot.com

    ReplyDelete
  19. Perfect..just perfect...worked for me ...thank you.

    ReplyDelete
  20. Hmmm...it doesn't work.

    And there're 3 places in the Template scripts that contain .

    Cheers

    http://ramblerwithoutborders.blogspot.com

    ReplyDelete
  21. how can i know what code is blue color

    ReplyDelete
  22. sorry,it doesn't work for me....

    ReplyDelete
  23. I've been looking for this and tried to implement but it didn't work for me. I dunno why.

    ReplyDelete
  24. thanks, this widget is very good and simple

    ReplyDelete
  25. thanks very much, this is the best for me

    ReplyDelete
  26. great work dude, this is the best a simple related posts :D

    ReplyDelete
  27. Yess its work for me

    ReplyDelete
  28. It works perfect, Man! Great work!

    I'm just wondering if there's a way to avoid that the post itself appears in the "related posts" list.

    ReplyDelete
  29. Thanks its work in my blog

    ReplyDelete
  30. Many thanks, it worked on my blog.

    ReplyDelete
  31. I dont Know why but Not Working..

    ReplyDelete
  32. Thanks for the great widget! In my theme I have two [div class='post-footer'] so I had to put code from step 5 after the second one in order to make it work. However I found one significant issue: it prints a link to the current post (itself) as related post.

    ReplyDelete
  33. To remove the post itself from related list just replace data:post.url with data:post.canonicalUrl in code from step 5. Easy!

    ReplyDelete
  34. This is not working http://www.dailyfresher.com

    ReplyDelete
  35. thank but, but i dont see Related Posts tittle, how can i fix?

    ReplyDelete
  36. its not working for me www.tusst.com

    ReplyDelete
  37. bro, it doesn't work.

    hopefully you can update this and if it can be used in blog post or static page, that would be... awesome....

    ReplyDelete
  38. Thanks alot, Http://nobleloaded.blogspot.com

    ReplyDelete

Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!