New Blogger Related Posts With Thumbnails Below All Posts




| 56 comments

We all know the importance of Displaying Related Posts below each post on your blog.Displaying a list of Related Posts not only keeps readers on your blog clicking through your archive but they are also crawled by search engines.But to get readers clicking through the related posts you need them to be eye catching and that's where the related posts with thumbnails works so well.The related posts with thumbnails lists a selected number of posts and also grabs an image from each posts to display.The gadget we have in this post is similar to the popular Link Within Related posts but with some great extra features and options.

I have re sized the thumbnail and title so you can display more posts.Link Within Limits you to 5 posts with this gadget you can show as many as you like.This related posts gadget displays related posts using the labels, so it will list posts with the same labels as the posts it is below.You can add some extra customizations to this gadget and i will list them below the tutorial.

Screenshot 

blogger related posts

Live Demo - You can see this gadget below all posts on this blog.

Add The new Blogger Related Posts To Your Blog


Step 1. In your Blogger Dashboard Click > Design > Edit Html > Tick The Expand Widget Templates Box







Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

</head>

Step 3. Copy And Paste The Following Code Directly Above / Before </head>

<!--Start Related Posts Script From http://www.spiceupyourblog.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://4.bp.blogspot.com/_rKG-ziTSNUQ/TQjMBwjYg5I/AAAAAAAACgc/BT3MbSXKv1g/s1600/No+Image.jpg&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post From http://www.spiceupyourblog.com-->

Note - Change maxresults=7 in red above to the number of posts you want displayed.If the script can not find enough posts with the same label it will display as many as it finds.If you are comfortable making changes you can change the colors using a Hex Color Chart.

 Note 2 - You can change the title above the gadget, it is currently Related Posts.Simply Change the text In blue above.

Step 4. Now Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

<div class='post-footer'>

Note - If you cant find that find and use <data:post.body/>

Step 5. Copy And Paste The Following Code Directly Below Under <div class='post-footer'>

<!-- start related posts-->
<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>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><br/><a href='http://www.spiceupyourblog.com/2010/12/related-posts-thumbnails-below-posts.html' target='_blank'><font color='#ccc' size='small'>Best Blogger Gadgets</font></a><div style='clear:both'/>
</b:if>
<!-- end related posts-->

Everything in the right place ? Cool save your template and check out your Blogger Related Posts With Thumbnails.Make sure to check out more of our Blogger Gadgets and Design Tips.

Leave Your Comments, Views And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

56 comments:

  1. There are also many plugins for that like linkwithin.

    ReplyDelete
  2. @ Ayush - The Link Within Gadget is very good, i also have a post with all the settings to customize Link Within.But this gadget uses a different method to find the related posts and can display more posts etc..Both nice options.

    ReplyDelete
  3. Hi, and thank you.
    I've added your code, it works, but the gadget appears in double, what did I do wrong?

    here: http://chateau-du-courtioux.blogspot.com/2010/12/marcillat.html

    ReplyDelete
  4. @Vermine - That is odd i presume you only added the second section of code once, check just to make sure.How many posts did you select to be displayed ?

    ReplyDelete
  5. Indeed, real strange.
    Dodged the issue by erasing the second part below the post-footer.
    Dirty cooking ;-)
    Anyway, thanks for your answer.

    ReplyDelete
  6. thanks bro. bt its nt working on my blog sumthng wrong in code????
    plz chek ones ok bro...!!

    ReplyDelete
  7. ohh sory its working thnxx paul bro...!!
    bro. may i set only star rating in outbrain....???

    ReplyDelete
  8. This worked like a charm! Thank you so much, I've been struggling getting this set up exactly how I wanted it. Perfect tutorial!

    Laura's Last Post: Dining In: Trying not to burn down the kitchen

    ReplyDelete
  9. @ Pree T - I pushed this post through just for you :) so i was glad to see the second comment saying you got it working ! Enjoy..

    ReplyDelete
  10. @ Simplifying in the South - I dont remember adding Comment LUV to display the latet posts LOL.Very inventive way to add a link so i published the comment.Glad you like the script...

    ReplyDelete
  11. Nice tutorial.Thanks.Its been a long time,havent updated my blogspot :)

    ReplyDelete
  12. Good job. I am currently using linkwithin widget for related post. I will try this out shortly...

    ReplyDelete
  13. Thank you mate , u made my day !

    ReplyDelete
  14. bro. paul...!!
    u have a gud knowledge about blogger...!!
    having great mind and intelligence...!!
    thnxx u once again...!!!@PauL

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. I tried this twice and still can't get it on my blog. Seems simple enough and found the necessary spots to insert code pretty easily, but nothing shows on my blog ... any thoughts?

    ReplyDelete
  17. Hi,Paul! I had the linkwithin widget,and i just can't get rid of it.I've made everything like you said but i can't see anything,and i guess it's because i still have the linkwithin related posts. Can you tell me how can i cancel it and install this one? Thank u!

    ReplyDelete
  18. @ Sarah - I took a look and you seem to have the code correct so I'm not sure what the problem is.It could be effected by another script in the template.Try removing the code and adding it again (The turn it off turn it on fix).If it still wont work maybe you could try the link within related posts gadget.

    Paul.

    ReplyDelete
  19. @ Ana Maria - The Linkwithin code should be in a gadget on your design page and should have the title linkwithin.Go to your design page, once you locate it you can remove it.

    Paul.

    ReplyDelete
  20. I've already tried to remove it from the design page,it dissapears,and then i've followed all the steps exactly,but i can't see nothing,it doesn't works for me,and i really don't understand why...There are so many people that are using this type of related posts...I am perfectly sure i do it corectly... :((( now i have to turn to my old 3 thumbnails linkwithin :) Sorry if i disturbed u and i wish u a wonderful day.

    ReplyDelete
  21. Hey I tried this on my site. But I dont see it coming. Please help me paul.. I am karthik. hope you remember me.

    ReplyDelete
  22. I couldn't get this to work for me either... All that came up were 2 tiny boxes that showed links to this site and another when hovered over.

    ReplyDelete
  23. thanks,it's working perfectly,how do you get a border around it like you have in yours?

    ReplyDelete
  24. Is there a way to display the title of the post completely, Paul?

    ReplyDelete
  25. Hello,

    I've added the code but it doesn't show up. What am I missing?

    http://www.huisvlijt.com

    ReplyDelete
  26. @ Nicole - Just checked your blog and the related posts are there !

    ReplyDelete
  27. hi, great post i add it to my blog but it don't show more than 5 result when i make reults more than 5. any help please, thanks

    ReplyDelete
  28. HI Paul. Tried doing this but it is not displaying anything. What could be wrong?

    ReplyDelete
  29. Hi!
    I removed the Link Within gadget, I followed the steps as described by you, bt unfortunately nothing appears on my blog. There is a blank space where I think this gadget should appear, but it is blank... I tried redoing all the steps, but it did not work.
    Any suggestions?

    ReplyDelete
  30. Oh, sorry, it does work after all!

    ReplyDelete
  31. thanks, really useful tips :)

    ReplyDelete
  32. Yes, i prefer this widget than the linkwithin.. I manage 14 related posts in 2 rows!! ahahaha! Thanks Paul! Love U even more!! :D

    ReplyDelete
  33. i got related post widget from way2blogging before and it's stop working after 1 month and when i try to remove code my all blog comments mixed up but with your code my related pots works again thx for this widget i know way2blogging your fried but i am telling what happened with me and i got many awesome stuff from you so thanks so much for great blog

    ReplyDelete
  34. Hi, is there a way of customizing it so that it looks normal? I am so glad you posted it because it's the only one that appears to work but it squishes everything together so that my words aren't whole words, rather than stretching the contents to fit or at least having it wider (as yours are shown wider). LinkWithin won't show my updated posts after I changed some and deleted the original versions, so I can't use that or OutBrain (it's doing the same thing). Any suggestions?

    ReplyDelete
  35. Is there a reason why it is not working anywhere that I can tell right now?

    ReplyDelete
  36. i goes through your steps but still not show ralated posts thumb.
    please can you give me simple blogger templete builtin related post tumb view .xml

    thanks

    ReplyDelete
  37. Dear Paul
    I added your given code in my blog for realted Posts , I want to show posts more than 7 , 15 or 20 in two rows below my post , but I am failed to do as , please help me , how can I do this, I adjusted post numbers 10 but it only displays 6 or even time 7 related posts, please help me

    ReplyDelete
  38. Hello,

    I just recently noticed that this had stopped working on my blog. Is there a solution to fix this problem?

    Thanks,
    Michael Hoang

    ReplyDelete
  39. My search did neither find the post.footer nor post.body :(
    Is there maybe an update on this?

    ReplyDelete
  40. What if I can't find Div class='post-footer' OR data:post.body/ ?

    ReplyDelete
  41. All that shows up for me is a link to your best blogger gadgets. I've tried to removing the code and adding it again several times to see if I could make it work, but haven't had any luck. Any ideas? Thanks for sharing your expertise!

    Elesa
    www.elesahag.blogspot.com

    ReplyDelete
    Replies
    1. There was a problem with the text file elesa, it shouuld work fine now..

      Delete
  42. Hello Paul,

    I checked my blog today and it seems that your code for related posts does not work on my blog anymore. How can I fix this?

    I have not changed anything since I added the code, so I was wondering if there was something wrong with the link to the javascript files.

    ReplyDelete
  43. hey,
    i applied the given code on my blog www.hdwallpapers2u.blogspot.com
    it working fine there ...but i have a problem there it works fine only if we click to that specific post...doesnt work on homepage...please help me

    thanks in advance !!

    ReplyDelete
  44. Great tutorial, thanks for taking out time to share this. I already incoporated the gadget into my blog but it only works for the first post. Also it does not seem to work on subsequent posts after I added it. Please could u kindly take a look and possibly profer a solution. My blog is http:// chbzchjk.blogspot.com Thanks in anticipation

    ReplyDelete
  45. work done, nice tutorial, i have try it and success, thanks for tutorial

    ReplyDelete
  46. nice post, it worked for me in my blog http://honeyfreetemplates.blogspot.com/. Thanks so much.

    ReplyDelete
  47. Thanks. really nice work. but i will use in Linkwithin. but thanks.

    ReplyDelete
  48. working but just undur the "div class='post-footer'"
    why does not work in main page? like Linkwithin

    ReplyDelete
  49. Really nice thanks for sharing this. Useful i like it

    ReplyDelete
  50. Thank you, it's working perfectly. I would like, title to be with smaller font? And is it possible for links to open in new window?

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us