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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/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=”http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”; - To Change the Colour of the Splitter Line , edit.
var splittercolor=”#d4eaf2″;
To change the other colours and all you will have to modify the CSS
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.
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.
try linkwithin it is very nice …… I am using 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:
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. http://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
@Ritesh,
Hi, I’m trying out your widget. Can I ask something a bit technical: how does your widget determine which posts are related?
Thank you
Hello this plugin work on labels if you don’t add labels to the post the Widget won’t work, as blogger ain’t that advance to use Title and Post keywords it instead uses the Labels of the post and then matches it with the other post the most post getting the relevant and same labels will be displayed first and so.
Hope you Understood :P
Hi Ritesh,
Thanks for ur explanation.
How come the widget only gives very limited suggestions for related post? (many times, only 1 suggestion)
Can you take a look at my website, please?
And is there a way to make the thumbnails bigger?
Thanks
As I told you the Widget uses the labels more the relevant the labels are the related post you get , if their is one post having that much relevant label then only that 1 post will be showed
@Ritesh
Yup, sure… I completely understood your explanation.
The reason I’m asking is because I have 22 posts with the label “wedding”, but the widget only provided 1 relevant post (even though maxresult has been set at 5).
That’s why I initially asked how the the widget determines relevancy.
So, I was a bit confused as to why the widget didn’t work properly.
Thanks anyway
This code did not work for me at all. I checked and re-did a few times. I also took out the LinkWithin to see if it will work, but no. I put LinkWithin back.
Ohk , Then i guess it will need to figure out
Thanks for the tutorial. Mine worked fine, with the exception that it is displaying the related posts over top of my “labels”, “comments” etc…
Any ideas how to correct this?
Jolene ,
If you provide me with the link were you encountered this , it will help me to troubleshoot your problem
maybe your problem in your template….try editing in design->page element->posting blog…then edit…rearrange…and check it
Thanks buddy for your reply , its great that you are helping others :) , please continue kind work like this :)
hehe…its ok..thanks for your support..^^
I have added the code and increased the maximum result to 10.But still its showing only 5
khawer ,
did you changed ? this one to 10 :
var maxresults=5;
How to change thumbnail size in this url
var defaultnoimage=”http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;
Khawer ,
you cannot change size using this URL instead i suggest change the URL to one you like , otherwise make changes in the CSS to get the desired results
thanks your site is great .but I implement these steps many times but no results
I got the similar steps from different site but no results
Yes i have changed max result to 10 and its working.To change thumbnail size do i will have to replace full url to any other image location link
Its not that necessary to change the URL , but you can also use CSS instead to expand the size of that image
I tried that script but nothing got except only an error. Check this.
Tahmy Khan,
I m unable to find you using categories, the widget only works when you have valid categories and post in that categories
I have already fixed it.. Thanks! take a look at my blog
Great and it is working great as i can see it :)
Does this code work for a private blog? Because I’ve checked and re-checked the code and I don’t see anything. I did this step too: “ from both step 5 and step 7.” and I also increased maximum results to 10 to see if that would help but it didn’t. When I look at the individual post “grab this widget” shows up though. Thanks!
J please tell me the URL of your blog so that i can checkout what is the problem
Thanks a lot man, used this script and works charm.
hey, it work but only on posting page..
buat I can’t see in every page or in home..
any solution?
please check the post properly i have mentioned their how to show it on all pages :)
eh, it work..
sorry because I only remove the 2 lines in code above , and I forget to remove 2 lines in the other code..
my big thanks for this great tutorial ~ :)
hello there. congratulations for you site, it is very good..
i would like to ask you how can i change the colors of the letters cause cant see them. you can check t an my site tomagiko.blogspot.com
thank you
WiZaRDe, to change the color just make the changes in CSS code.
And where is this CSS code? I want to make them white than black. Thank you again
I have added this widget in my blog but it shows in a bullets format. Thanks for sharing this widget to all.
Thanks this was very helpful to building my site.. It will be very gratefull if you have time to visit my site and give suggestion on how could improve my site…
It is working ………. thanks for sharing i have added this to my blog
i have tried this
but no use
can u help please ??
can you please specify the problem
I was search a lot, finally i reached here. This code is working now in my blog. Thanks for sharing some of these blogging tips. Looking for more blogging tips.
Thank you i am going to apply this in my blog …… Thank you for sharing …
Hi I followed the steps, but cant seem to get it working. sincerely need a lot of help. Thanks
Well, i can only help if you mention what exactly is the problem
Hi – I finally updated to the new Blogger templates. I was hesitant because I knew I would lose a lot of my custom additions. One of them I did lose was this widget, which was working fine with the old version. Now I am having trouble following your instructions – when I click on “expand widgets” I can find the easily and insert the first code before it, but there is more than one “” line in my template, so I am not sure which one the second part goes under. TIA, dejamo.
I put this code in, but when I had a look at my blog nothing had changed.. there wasn’t a ‘related posts’ widget anywhere. Darn. I didn’t have any trouble finding where to put the codes in, your instructions were good.. but yeah, no widget– any advice on what might have gone wrong?
The Code only works on the Post Page, take a look whether it is working their or not
yeah that’s where I was looking for it.. no code
Well i found out the reason is simple, the widget runs on labels, but you have not used labels in any of your posts, because of that the widget is not working
Ah. Simple enough, thanks :)
Thanx a lot dude
Hello,
I followed exact instructions you stated above, but still no changes…
Can you help me?
Here’s my blog
http://amazinglyjustbeautiful.blogspot.com/
Xedric,
you are not using Labels, and this widget is based on Labels
Please do provide me a detailed instruction on how to solve this issue… Any help is greatly appreciated..
thank you.
Nice , i try
I really likes this widget. The problem is that the many of the same posts are showing up again and again on different posts because its only displaying the top 5 results returned. I need to randomize it a little so that the related posts are more varied, but still related by tag.
Hey this is not working on my blog… could you please help? I have pasted the code in html still I don’t see the related posts section.
http://allinfoatoneplace.blogspot.in/
Thanks,
Sekhar
Sekhar,
I checked the source code of your site and have found that you have not implemented the code
Hello Ritesh,
Sorry your code was accidentally removed, I have placed it againcould you please check now and help me out why it isn’t working.
http://allinfoatoneplace.blogspot.in/2012/04/how-to-create-facebook-widgets-for-blog.html
Thanks,
Sekhar
Hello Sekhar,
I have seen the source code, and found out that you have not used the second part of the code, check the code at the 7th point, and use it at the proper place.
Hey Ritesh,
It works like magic, thanks a ton !!!!
http://allinfoatoneplace.blogspot.in/2012/05/apple-releases-ios-511-update-for-ipad.html
You are most welcome.
Hello, it’s doesn’t work to my blog.. Would you help me pls..
Thanks.. :)
I’m sorry my friend.. It finally works.. Thanks for your share.. 8-|
Hello, We have stopped Support for Blogger, because in recent years blogger has changed a lot.
Dear,
How to make the thumbnail image bigger than 72px?? Can you help me?
Thanks.
thnanks for sharing this! it helps a lot,
LinkWithin is another good site for this, much simpler tool to use.
hello and thx for the code, working perfectly and with the tutorial its so easy to put on his blog.
I have 1 question, how to change the choice to collect labels, for example in my post I have a 3 tags but because the blogger puts labels in alphabetical order , so the code always chooses the first label, its possible choose some specific tags first and after all else;
Thanks for your time!
Well, i have never thought about this, because we have less control over blogger.
hi, i’m using a custom template and don’t see this code . I see this . I paste the second code above this and don’t work… can you help me?
Bro, i successfully done everything, thq so much. but how to change text colour and splitter colour .please tell me
hello!! I’ve done everything, and it’s perfect but I just want to know I can make this more big!!!
thank u
Hi, thank you for your the code. But I think I did something wrong, nothing changes but now I dont know how to fix it:(
Could you please help me?
I m extremely Sorry, but the support to Blogger has been cut off, i m extremely sorry :(
this code is really working in my blog.
good job and great thanks for sharing it
Hi, just found this and it’s awesome, I’m just curious ho do you change the width?
Thanks for the answer!
Well you can edit the width by using CSS
thanks for sharing. I have tried to add this to my blog slurpyplatter.blogspot.com following the steps above and also through Linkwithin, however neither method is working to display the widget. Can you please help?
The Reason is clearly simple, the Related posts in blogger are displayed based on Labels and not on title, you are using labels, the problem is that you are creating new labels for every new posts, the widget will properly work when, you give the same label to 2 to 3 posts, then you can see the widget working
Not working on my blog plz help me
http://www.rockingaseel.blogspot.com
Aseel, I have checked the source code of your site but it appears that you have not completely implemented the code, just try this whole Procedure again
This is not working on my blog http://jokesarelife.blogspot.in please check….
it seems you have not added the code mentioned on Step 7, please insert it and try again.
Finally it works on my blog http://super-gratisan.blogspot.com
Thanks Ritesh Sanap. Keep sharing.
it looks beautiful on your blog, I guess you did some styling to it.
yes, I did on css code
you can change the font size by changing the CSS of this code :
#related-posts a{
color:black;
}
by adding the font-size attribute so it will be like this
#related-posts a{
color:black;
font-size: 18px;
}
Too edit thumbnail size you will need to download the copy of the Javascript and edit it on
line 85to change the thumbnail size to the desired sizeYou can contact me through the Contact Us page
http://www.best2know.info/contact-us/
Modify the CSS to change the styling of the Title and Background
do you have the css for that? thank you xx
CSS is there in step 5 check this code :
#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;
}
This is the CSS used for styling Related posts widget for blogger.