Filed Under :
Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.
So you are tempted to add this widget then follow this steps:
- Login in to your Blogger Account.
- From Dashboard Click on Layout and the Click on Edit HTML.
- Then Check the "Expand Widget Templates".
- Find </head> .
- Then Before </head> Paste the following Code.
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_vPt-IEbb9d534j9s4afrz8t5l5nq8L6v5PIROM6fJ48dDE9xW9SaU0WaME6jIiYj97YKTfRfTeI2-slpclgbn80H6MIWMWv3zIKbd7uRnn9IPk2vfITe1YhzoIfGWF0LHgi_H9bf_6g/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://best2know.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End--> - Now Find
<div class='post-footer-line post-footer-line-1'>. - Now immediately below that line add this code.
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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><div style='clear:both'/>
<br/>
<a href="http://www.best2know.info/2010/04/you-might-like-this-widget-for-blogger.html" target="_blank"><b>Grab This Widget</b></a>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->[Re:FIXED] - You can adjust the maximum number of related posts being displayed by editing this line in the code.
var maxresults=5;
- To edit the title of the widget you can change this line of code.
var relatedpoststitle="Related Posts";
- To change the default thumbnail, you can edit this line of code.
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_vPt-IEbb9d534j9s4afrz8t5l5nq8L6v5PIROM6fJ48dDE9xW9SaU0WaME6jIiYj97YKTfRfTeI2-slpclgbn80H6MIWMWv3zIKbd7uRnn9IPk2vfITe1YhzoIfGWF0LHgi_H9bf_6g/s400/noimage.png";
- To Change the Colour of the Splitter Line , edit.
var splittercolor="#d4eaf2";
If you fall into troubles implementing this,don't panic.. :) .just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve this widget,then it would be really great.
How to display the related posts on every page and not only on the post pages?
Just remove the two lines starting with <!-- remove --> from both step 5 and step 7.
that is lines
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
and
<!-- remove --></b:if>
After listening to the comments by all of our visitors this code has been updated.
Good one thanks i have seen many of this types of widgets that are used sites like outbrains and linkwidget and i hate it. and also they take time load thanks for it.
I tried installing this on my recipe blog and the only thing it's showing is the link for "Get this Widget". I have no idea what I did wrong. You can contact me at hisspirited1@gmail.com and here's the link to the blog if you want to have a look:
http://spiritedscookbook.blogspot.com/
Thanks!
I have checked your blog I have seen that you already have the same type of widget . I think if you want use this widget replace that widget with this one and note that i think the current widget will suit your blog as the posts you are doing does not contain images so . keep that widget its good one or if you still want to use this widget start using images in the post . otherwise it will show no-images and the title which won't look nice.
great info..awesome! thanx
@zie007
thanks to you all who supports best2know
@zie007
thanks to you all who supports best2know
what if we do not have a thumbnail for each posts in the blog? would it still be listed?
If you give us a seperate html/javascript coding , we (users) can easily install this widget to add as a gadget and show related post...can u give me such..?
@Download amazing videos
my friend we cant do this because this widget contains special blogger tags which only works in main coding page of HTML if we make a widget installer for its then it wont work then also i will try to make one if i get succeed i will release it.
Please help, I have a same problem than turia, just grap this gadget sign appears, but did not understand what to change to get work this widget,
my blog
http://inspiraciok.blogspot.com
Please be precious with answer, i m begginer with html
thank very much!
@Bon-bon
I have the your site and noticed that the code has stopped working so dont worry I will update it.
I just added this code, and it´s not working. As you wrote to bon-bon you will update it, does that mean the code will work again? or what?
@killyourdarlings
yup the code will work again but that one will be the new code.
@killyourdarlings
The code has been updated so give it a try and enjoy
I copied and pasted the code. but it is still the same :\
emily
http://diaryofemilyc.blogspot.com/
@eMiLy ChAnG
I m extremely sorry that earlier code also didn't work i apologize for it but this one will surely work please try it and thank you for understanding me
I'm getting an error:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "callback" must end with the ';' delimiter.
@Joy Reynaldo
I m extremely sorry that i forgot to convert the code. Now i have converted it.Go ahead and take the code.
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "max-results" must end with the ';' delimiter.
=[ why ?
@Spade
Problem Solved
I pasted the code but unfortunately it did not appear at all.. what is the problem?
@Nadzirah Hazwani
Pls post the link to your blog with your Email Id. Until i see it i cant really tell you the problem.
Still not showing up on all pages - only the individual post pages. How can I get it to show up on the bottom of all posts on the main page??
@Mrs. Smith
If you want to display it on main page also then just remove the code around the Remove HTML Comment
like : <!-- remove --></b:if>
Please note that this step is already described in the tutorial
@Ritesh Sanap
LOL! Did this but didn't save it before. Saved it now and it's working beautifully! Thanks so much! Appreciate it!
@Mrs. Smith
You are most welcome. Contact Me at any Time i will help all of you out just a message at this id riteshsanap@gmail.com and i their for your help
Hi,
I'm deciding between YARPP with no thumbnails, LinkWithin or something in between. My template also has "Related Posts" on the top right sidebar. My feeling is that it's distracting on the sidebar and makes more sense on the bottom of the post. I could also have both, but that may be overkill. A simple/minimalist look is my aim. www.reluctantla.com. Can you give me your thoughts?
@ReluctantLA
See the all the three widgets have been designed in the same way but the YARPP and LinkWithin are not much customizable like this open as this is the main source code behind very Related Post widget for blogger available on the Internet.
i have placed this code and i am not able to find 'Related Posts' under my posts. Can anyone look into my blog and suggest me, if any thing went wrong or not.!
This is my blog
http://latestsongstelugu.blogspot.com/
@telugu songs free download
The Problem is not in the code the problem is that you are using different labels for different post. this All related post widgets run using labels.Try using a Particular label for more then one post like if the song is sung "x" singer then if you are posting another Song Sung by that singer then add that label this will surely run. the related post widget if any other help then do tell
Hi, I tried this and it just said, 'Grab this widget', so I tried to delete these bits if html and now it says this:
Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "head" must be terminated by the matching end-tag "".
Can you help? I'm only a beginner at html.
@MrsBossa
This code is not an simple HTML code so i would sugguest you replace the old code again. I would sugguest that not play with some important codes as they harm our site.
thanks for the reply Ritesh. Hope i can get it from this time.
@telugu songs free download
You are most welcome. If any other help then don't hesitate to ask
Hi Ritesh,
Thank you for this, it's great!
I have a problem though - only my old posts are getting updated by this (no related posts are appearing below my new posts).
Any ideas why?
Many thanks,
Ben Ralston
premjogacenter at gmail dot com
@Ben Ralston
Hi I m Glad that you contacted me when you have a problem but while Reporting please also include the link to your blog so we can verify what is the problem so i cannot reply you with solution right now.So now please reply back with link to your blog