Simple Blogger Related Post Widget Without Thumbnails/Text Links Only

One of the best ways to keep your readers engaged with your blog is to link new posts directly to other related posts that you've previously written or by simply displaying featured or related posts at the end of your article.

To do this you've got the likes of linkwithin, outbrain and nRelate -- all good widgets available for just about any platform. Other than that, for blogger, there's hardly any script available that will properly show related posts at the end of your post (or any other place that you'd like).

If your looking to display text links only, Mike More's related post widget for blogger is the best and simplest you'll find. The script below is version 1.0. The latest version 2.0 can also display post thumbnails and offer plenty of customizations.

The Script: (Blogger Related Post Without Thumbnails):


Add a new Javascript/HTML widget and paste the following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'loadingText':'loading...'
});</script>

Note: The widget uses post labels to display related post links. Your recent posts will show up instead, if labels are missing. Make sure you've defined them.

Here's how to add the codes if you prefer:
  1. From your blogger dashboard, click "Layout" on the left panel.
  2. Click "Add a gadget" and scroll down until you see HTML/JavaScript. Open it.
  3. Paste the above codes in the content area there. Save it.

That's it. Your related posts should show up at the bottom of your article. It should help you increase page views and in turn decrease bounce rates - Both positive SEO signals.
,

60 comments :

Reader's Comments

  1. UnknownMarch 20, 2013 at 11:37 AM

    Nice, This is work for my blog... Thanks

    ReplyDelete
  2. SarahMay 29, 2013 at 11:54 AM

    Thanks!
    I've tried Linkwithin, but it won't work like I want. This code is great!

    ReplyDelete
  3. Holidays GuideMay 31, 2013 at 1:20 PM

    Thanks,it works.

    ReplyDelete
  4. ahjummaJune 4, 2013 at 12:08 AM

    wow, i love it simple, this is great! works for my blog! thanks so much :)

    ReplyDelete
  5. Get Life TipsJuly 3, 2013 at 1:48 AM

    This works great,and also improves page load times,and reduces redirects to other domains,i recommend this to anyone who are looking for seo.Thanks for this post.

    ReplyDelete
  6. Abhishek KRJuly 6, 2013 at 5:32 AM

    at last i find out on your blog. thanks a lot!

    ReplyDelete
  7. Akmal AkbarovJuly 12, 2013 at 10:39 PM

    thank you it is also working on my blog but instead of showing Related Posts text it is showing Recent Posts. How to fix that error? Thank you ))

    ReplyDelete
    Replies
    1. WajahatJuly 13, 2013 at 4:14 AM

      Sorry for a delayed reply. You need to have support for post labels in your template for this code to display related posts instead of recent posts.

      Make sure you have the following code in your template (Just replace [] with <> ).

      [b:if cond='data:post.labels']
      [data:postLabelsLabel/]
      [b:loop values='data:post.labels' var='label']
      [a expr:href='data:label.url' rel='tag'][data:label.name/][/a][b:if cond='data:label.isLast != "true"'],[/b:if]
      [/b:loop]
      [/b:if]

      Delete
  8. marrythaigirlsingaporeJuly 20, 2013 at 6:53 AM

    Hello, thanks, was very easy to implement.

    ReplyDelete
  9. AnonymousJuly 28, 2013 at 3:04 PM

    Hi, is there any way to change text "related posts"? I have my blog written in other language than english and wanted to add text in my own language.

    ReplyDelete
    Replies
    1. WajahatJuly 28, 2013 at 9:28 PM

      Version 1.0 does not support changing the text. However you can move to v2.0 for customization.

      http://www.moretechtips.net/2010/09/smarter-related-posts-widget-for-google.html

      Delete
    2. akshatMarch 23, 2014 at 6:19 AM

      How TO Increase Text Size Please Tell Me Fast

      Delete
    3. WajahatMarch 23, 2014 at 8:04 AM

      Dude just add this css code:

      #related-posts ul li a {
      font: normal 14px 'georgia', arial, times;
      }

      Delete
  10. RizkyJanuary 22, 2014 at 4:04 AM

    Very nice bro.. thanks...

    ReplyDelete
  11. UnknownJanuary 30, 2014 at 2:35 PM

    It displays related posts even on the blog homepage under post excerpts.
    How can I get the related posts like the one you have on your own blog ;)

    ReplyDelete
    Replies
    1. WajahatJanuary 30, 2014 at 7:02 PM

      Enclose the widget with this condition. Just replace [ ] with < > on both ends.

      [b:if cond='data:blog.pageType == "item"']
      PLACE WIDGET HERE...
      [/b:if]

      Delete
  12. AnonymousFebruary 5, 2014 at 1:14 AM

    Hello,
    I love this related posts widget. It's simple and it works unlike many others I've tried, but I have a little problem and hopefully you can help me out with this...

    I also put some code in the template for share buttons so they appear under every post, but the related posts are above those buttons and I want the buttons to come first after the post ! I really don't know how to fix this.
    I could put the buttons code in every post and then they will be above the related posts, but I really don't want to do that, because if I would want to change the buttons one day, I would have to edit each and every single post !
    My blog: leesmix .blogspot.nl

    ReplyDelete
    Replies
    1. WajahatFebruary 5, 2014 at 1:34 AM

      You can try adding this code directly in your template right below the share buttons code. I have it installed that way.

      Delete
  13. UnknownFebruary 5, 2014 at 1:42 AM

    Hello Wajahat,
    I have tried that, but it doesn't make a difference if it's placed directly in the template or in a widget it always puts my sharebuttons underneath it.
    I can't figure it out and it's probably the last thing I need to fix before I can really "start" with my blog..

    ReplyDelete
    Replies
    1. WajahatFebruary 5, 2014 at 2:27 AM

      I was just looking for a fix for you. This widget is designed to display at the end of the post. The 'containerSelector':'div.post-body' defines the position for this widget. I have mentioned mike more's blog in the post above (The guy who wrote this plugin). Mike should let you know if there's a possibility.
      http://www.moretechtips.net/2009/04/jquery-gdata-api-smarter-related-posts.html
      Saw that you are using the addthis widget. I'll get back once I'm able to switch positions of these widgets on my end. :)

      Delete
    2. UnknownFebruary 5, 2014 at 3:03 AM

      Thank you for your time ! I think I already tried the smarter related post thing and that it didn't work ( ps. that link doesn't work anymore).
      I hope it can all still work out. I'm new to all of this and tried Googling for a solution but haven't found anything yet.

      Delete
    3. UnknownFebruary 7, 2014 at 4:09 AM

      I changed the part : div.post-body
      to: div.post-footer-line-1

      and now the related posts links are where I want them to be. Underneath adsense and above the labels :)

      Delete
    4. WajahatFebruary 7, 2014 at 9:54 AM

      Awesome. You're smart.

      Delete
  14. Ataur RahmanMarch 3, 2014 at 6:45 PM

    Thanks for nice code provide. One of the best article.

    ReplyDelete
  15. JohnMarch 5, 2014 at 9:45 PM

    Thank you

    ReplyDelete
  16. MillhioreMarch 9, 2014 at 6:40 AM

    thanks!!!

    ReplyDelete
  17. AnonymousMarch 16, 2014 at 8:29 PM

    Yes. You are great. Related posts widget is working for me on HowToBevast

    ReplyDelete
  18. JhnWorldMarch 20, 2014 at 1:03 AM

    I use this in my blog

    ReplyDelete
  19. ctojournalApril 8, 2014 at 9:02 AM

    I'm looking for easy text link related posts, this article can help me clear all problem

    Grate share,
    Thank

    ReplyDelete
  20. PaulApril 21, 2014 at 1:29 AM

    Nice bolg. It is really easy to do.

    ReplyDelete
  21. Aaron JohnsonJune 16, 2014 at 10:06 AM

    That's a great widget! Now I had related posts on my blog. But 1 question is: How do I turn off recent posts feature?

    ReplyDelete
    Replies
    1. WajahatJune 16, 2014 at 10:45 AM

      Are you seeing recent posts instead of related?

      Delete
  22. WajahatJune 18, 2014 at 9:08 AM

    I don't see the widget anywhere on your blog. Just add the following in your CSS.

    #related-posts ul li {line-height: 1.3}

    ReplyDelete
  23. UnknownJuly 23, 2014 at 1:37 AM

    showing recent posts.. lol

    ReplyDelete
    Replies
    1. WajahatJuly 23, 2014 at 2:29 AM

      You need to be define "labels" for your post for this to display related posts instead. Also your template should have support for post labels.

      Make sure you have the following code in your template (With the [] replaced with <> ).

      [b:if cond='data:post.labels']
      [data:postLabelsLabel/]
      [b:loop values='data:post.labels' var='label']
      [a expr:href='data:label.url' rel='tag'][data:label.name/][/a][b:if cond='data:label.isLast != "true"'],[/b:if]
      [/b:loop]
      [/b:if]

      Delete
    2. UnknownAugust 24, 2014 at 10:50 AM

      when you say to put 'the following code in your template', where do you mean? in html, or in the actual script coding? or what? I'm so confused where to put it

      Delete
    3. WajahatAugust 24, 2014 at 11:17 AM

      It really depends on your templae. If your are using the default template, just look for the following line in your template and paste the code just below it:

      div class='post-footer-line post-footer-line-3'

      Just make sure you replace ' [ ] ' with ' < > ' anywhere it appears in the code as I cannot paste it here in the comment section.

      Delete
  24. Atiqur_RahmanAugust 13, 2014 at 10:50 AM

    Thank you very much.Its really helped me.

    ReplyDelete
  25. RuchaJanuary 2, 2015 at 11:44 PM

    How long does it take to show up?

    ReplyDelete
    Replies
    1. WajahatJanuary 3, 2015 at 12:14 AM

      Immediately. Just make sure you are using labels on your posts.

      Delete
  26. BlogShout24January 21, 2015 at 9:46 PM

    Nice and Simple. Love this!

    ReplyDelete
  27. FunmiJanuary 23, 2015 at 11:30 PM

    Hello sir! I paste the code but nothing show up! pls enlighten me more on to get the related post

    ReplyDelete
    Replies
    1. WajahatJanuary 24, 2015 at 1:32 AM

      You have used the code twice. Just use it in one widget and it should show up.

      Delete
  28. Imran ZahidJanuary 31, 2015 at 6:59 AM

    Thanks dear but how to increase the no of posts in this code

    ReplyDelete
    Replies
    1. WajahatJanuary 31, 2015 at 7:38 AM

      This code only allows 5 posts by default. The latest version however, does allow for further customizations, including increasing the number of posts. Check out here: http://goo.gl/A9cIOc

      Delete
  29. AnonymousFebruary 22, 2015 at 1:52 AM

    This comment has been removed by the author.

    ReplyDelete
  30. Rambling MomApril 29, 2015 at 6:54 AM

    It worked great, but it also shows related posts in my "pages", and I don't want that. Is there a quick fix? TY.

    ReplyDelete
    Replies
    1. WajahatApril 29, 2015 at 10:42 AM

      Hi,
      Simply enclose the widget with the "Posts (item)" conditional tag shown on this page:
      http://techmarshal.blogspot.com/2014/01/about-blogger-conditional-tags-and-how.html

      Delete
  31. AnonymousJune 30, 2015 at 7:59 PM

    Hello Mr Wajahat...
    That trick works in my blog, but my slider (lofslider) stop working. Is it because jquery in my lofslider?
    What must i do?
    Thank you so much for your reply.

    ReplyDelete
    Replies
    1. WajahatJuly 1, 2015 at 11:10 AM

      Hi! Try removing the jquery from this code (The first line). You probably have two instances of jquery code in the template which may be causing the problem.

      Delete
  32. UnknownJuly 14, 2015 at 8:52 AM

    Hi Wajahat!
    I have used it in my site. it's working fine but it also shows the labels below the post that I don't wanna show...can you work it out pls? Thanks a million! Here is my site:
    EngGuide

    ReplyDelete
    Replies
    1. WajahatJuly 14, 2015 at 4:29 PM

      Just add this css code to hide the labels:

      .post-labels {
      display: none;
      }

      Delete
  33. UnknownJuly 16, 2015 at 12:47 PM

    Thanks but another thing bro... It's showing related posts in post pages but recent posts in static pages... Any way to hide this recent post?

    ReplyDelete
    Replies
    1. WajahatJuly 16, 2015 at 9:18 PM

      Use the related posts widget between conditional tag like this: http://pastebin.com/hb9f4tNh

      Delete
  34. UnknownNovember 9, 2015 at 8:37 AM

    Hey Wajahat,
    First, thanks for great article, I know it's an old one. We built Limk as related posts widget for Blogger.
    Launched early in this year and the platform served over 500 million recommendations with hundreds of happy publishers.

    Key advantages of Limk:
    – Limk related posts widget is using the direct internal URLs, no redirection urls. Good for SEO juice.
    – Mobile ready, looks great on mobile phones and tablets
    – Stats panel gives all the data you need.
    – Optional monetization is available for publishers.

    Bloggers can give it a shot (it's free by the way):
    https://app.limk.com/auth/signup?utm_source=register

    Would love to help anyone to try our platform: ozer@limk.com

    ReplyDelete
  35. MayhartNovember 12, 2015 at 12:28 AM

    nice bro,

    it works on my blog,

    its super simple and recommended ways to add related post.

    anyway,
    i want to show more than 5 post, maybe 10 related post below my article.

    what should i do?
    thank you

    ReplyDelete
    Replies
    1. WajahatNovember 12, 2015 at 4:03 AM

      Version 1.0 does not support customization. However, you can move to v2.0 for further customization.
      http://www.moretechtips.net/2010/09/smarter-related-posts-widget-for-google.html

      Delete
  36. shankar lalMarch 24, 2016 at 10:45 AM

    relay goods ands simples

    ReplyDelete
  37. Ramesh PrajapatiJuly 20, 2016 at 5:18 AM

    can i edit this code admin skin colour.

    ReplyDelete
    Replies
    1. WajahatJuly 20, 2016 at 6:02 AM

      You could definitely apply CSS to style the widget to match your blog's design. Thanks!

      Delete
Subscribe to: Post Comments ( Atom )