Posted : Sunday, December 19, 2010 | Post Author : Paul Crowe | 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
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 == “item”‘>
<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, βTimes New Romanβ, 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=”http://4.bp.blogspot.com/_rKG-ziTSNUQ/TQjMBwjYg5I/AAAAAAAACgc/BT3MbSXKv1g/s1600/No+Image.jpg”;var maxresults=7;var splittercolor=”#d4eaf2″;
var relatedpoststitle=”Related Posts”;
</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 == “item”‘>
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != “true”‘>
</b:if>
<script expr:src='”/feeds/posts/default/-/” + data:label.name + “?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6″‘ type=’text/javascript’/></b:loop>
<script type=’text/javascript’>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(“<data:post.url/>”);
</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.
56 comments:
There are also many plugins for that like linkwithin.
ReplyDelete
@ 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
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
@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
Indeed, real strange.
Dodged the issue by erasing the second part below the post-footer.
Dirty cooking π
Anyway, thanks for your answer.
ReplyDelete
thanks bro. bt its nt working on my blog sumthng wrong in code????
plz chek ones ok bro…!!
ReplyDelete
ohh sory its working thnxx paul bro…!!
bro. may i set only star rating in outbrain….???
ReplyDelete
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
@ 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
@ 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
Nice tutorial.Thanks.Its been a long time,havent updated my blogspot π
ReplyDelete
Good job. I am currently using linkwithin widget for related post. I will try this out shortly…
ReplyDelete
Thank you mate , u made my day !
ReplyDelete
bro. paul…!!
u have a gud knowledge about blogger…!!
having great mind and intelligence…!!
thnxx u once again…!!!@PauL
ReplyDelete
This comment has been removed by the author.
ReplyDelete
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
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
@ 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
@ 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
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
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
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
thanks,it’s working perfectly,how do you get a border around it like you have in yours?
ReplyDelete
Is there a way to display the title of the post completely, Paul?
ReplyDelete
Hello,
I’ve added the code but it doesn’t show up. What am I missing?
http://www.huisvlijt.com
ReplyDelete
@ Nicole – Just checked your blog and the related posts are there !
ReplyDelete
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
HI Paul. Tried doing this but it is not displaying anything. What could be wrong?
ReplyDelete
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
Oh, sorry, it does work after all!
ReplyDelete
thanks a lot
ReplyDelete
thanks, really useful tips π
ReplyDelete
Yes, i prefer this widget than the linkwithin.. I manage 14 related posts in 2 rows!! ahahaha! Thanks Paul! Love U even more!! π
ReplyDelete
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
Thanks man it works perfectly
ReplyDelete
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
Is there a reason why it is not working anywhere that I can tell right now?
ReplyDelete
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
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
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
not working
ReplyDelete
My search did neither find the post.footer nor post.body π
Is there maybe an update on this?
ReplyDelete
What if I can’t find Div class=’post-footer’ OR data:post.body/ ?
ReplyDelete
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
There was a problem with the text file elesa, it shouuld work fine now..
Delete
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
Very Well Done DUDE GOOD WORK
ReplyDelete
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
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
work done, nice tutorial, i have try it and success, thanks for tutorial
ReplyDelete
nice post, it worked for me in my blog http://honeyfreetemplates.blogspot.com/. Thanks so much.
ReplyDelete
Thanks. really nice work. but i will use in Linkwithin. but thanks.
ReplyDelete
working but just undur the “div class=’post-footer'”
why does not work in main page? like Linkwithin
ReplyDelete
Really nice thanks for sharing this. Useful i like it
ReplyDelete
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
Thank you
ReplyDelete