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.

62 comments :

Reader's Comments

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

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

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

    ReplyDelete
  4. 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
  5. at last i find out on your blog. thanks a lot!

    ReplyDelete
  6. 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. 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
  7. Hello, thanks, was very easy to implement.

    ReplyDelete
  8. 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. 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. How TO Increase Text Size Please Tell Me Fast

      Delete
    3. Dude just add this css code:

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

      Delete
  9. 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. 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
  10. 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. You can try adding this code directly in your template right below the share buttons code. I have it installed that way.

      Delete
  11. 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. 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. 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. 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
  12. Thanks for nice code provide. One of the best article.

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

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

    Grate share,
    Thank

    ReplyDelete
  15. Nice bolg. It is really easy to do.

    ReplyDelete
  16. 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. Are you seeing recent posts instead of related?

      Delete
  17. thank you . i implement this code and it works great thanks again this is my blog

    http://iptv-tv.blogspot.com/

    ReplyDelete
  18. one question please how to add space in lines of related post ..

    ReplyDelete
  19. 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
  20. Replies
    1. 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. 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. 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
  21. Thank you very much.Its really helped me.

    ReplyDelete
  22. How long does it take to show up?

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

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

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

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

    ReplyDelete
    Replies
    1. 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
  25. This comment has been removed by a blog administrator.

    ReplyDelete
  26. 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. 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
  27. 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. 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
  28. 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. Just add this css code to hide the labels:

      .post-labels {
      display: none;
      }

      Delete
  29. 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. Use the related posts widget between conditional tag like this: http://pastebin.com/hb9f4tNh

      Delete
  30. 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
  31. 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. 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
  32. can i edit this code admin skin colour.

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

      Delete