Blogger Related Posts with Thumbnails: LinkWithin

linkwithin related posts

Keep your readers engaged with LinkWithin related posts with thumbnails widget. The related posts thumbnails will appear under each post, linking to related stories from your blog archive. It will make your old posts accessible to new or casual readers of your blog, thus increasing traffic.

This tutorial will show you how to install LinkWithin widget to a Blogger blog. I’m splitting this tutorial into two sections -one is for installing default widget and another one is for installing custom widget.

Before proceeding with this widget, you might want to read about another related posts widget: nRelate Related Posts plugin. nRelate’s widget allows more customization, and has a posts reindex option.

 

a) Installing default LinkWithin widget

Adding a default widget is actually pretty straightforward.

  1. linkwithin setup Go to LinkWithin.
  2. Enter your email address and blog URL.
  3. Select Blogger for the platform and select the number of stories.
  4. Click Get Widget! and the widget will be added to your blog.
  5. Done! The related posts thumbnails and links should appear under each post now.

 

b) Installing custom LinkWithin widget

If you would like to customize the widget, proceed with the rest of this tutorial. You can change the placement of the related posts thumbnails and the phrase that appears above them. You can also specify on which pages they should appear.

Here we go,


I. Get your Site Id
  1. site idGo to LinkWithin.
  2. Perform the same steps (steps 2 to 4) as in a) above, except this time choose Other for the platform.
  3. You will be given a code snippet, similar to the snapshot.
  4. Don’t copy the code. Just jot down or copy the Site Id number for later use. 

II. Adding in the widget code
  1. Login to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Copy the code below and paste it right before </body> tag in your template:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script> 
    var linkwithin_site_id = SITE ID NUMBER; 
    linkwithin_text='YOUR CUSTOM PHRASE';
    </script> 
    <script src="http://www.linkwithin.com/widget.js"></script> 
    <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>
    </b:if>
    • Put your Site Id number in code line 3.
    • Change the “You might also like:” phrase with your own phrase in code line 4.
    • The code above will make the related posts appear only on post pages. If you want to display them on all pages, just remove code line 1 and 8.
  5. Save and view your blog.

III. Repositioning related posts display (optional)

By default the related posts thumbnails will appear after each post body, ABOVE the post footer. That means it appears (in most cases) above your labels, comments link and timestamp.

A few users mentioned that they prefer the thumbnails to appear BELOW the post footer, and asked me how can they make it so.

So here it is folks. Follow these steps to place the related posts at the very end of your post section:

  1. In Design > Edit HTML, with Expand Widget Templates checkbox ticked, find the following code:
    <b:include data='post' name='post'/> 
  2. Add <div class="linkwithin_div"></div> right after the line, like so:
    <b:include data='post' name='post'/> 
    <div class="linkwithin_div"></div>
  3. Click Save. You're done!

Enjoy!

107 comments to "Blogger Related Posts with Thumbnails: LinkWithin"

Nick August 11, 2010 at 5:05 PM    

u are a pro ;) thanks for the info ;)

Greenlava August 11, 2010 at 9:51 PM    

@Nick
Thank you for dropping by and commenting :)

Tu Patz August 12, 2010 at 9:55 PM    

how can you customize the linkwithin related post header(font size, font type)? please help me

steven stifler August 14, 2010 at 4:21 PM    

tou are a genius

Greenlava August 15, 2010 at 11:37 PM    

@Tu Patz
Go to Design > Edit HTML and add this CSS code right before ]]>< /b:skin> line:
.linkwithin_text {font-family:verdana,arial,tahoma;font-size:20px;}

use your own values for font-family and font-size,

Ahmat Susanto August 18, 2010 at 1:05 PM    

Tanks bro,i must learn more and more!

Greenlava August 18, 2010 at 3:47 PM    

@Ahmat Susanto
You're welcome. Have to agree with you, learning is a never ending process afterall.

Anup @ Hack Tutors September 10, 2010 at 8:10 PM    

This is a great widget GreenLava! But, there is not more spaces to place the enough related post :(

Greenlava September 11, 2010 at 8:03 PM    

@Anup @ Hack Tutors
Aah...so many widgets, so little space :)

Ms. Ileane September 14, 2010 at 5:41 PM    

Hi, this is a great. I never knew you could use this with Blogger. I really like this blog and I will take my time and visit some more posts here. I have both Blogger and Wordpress blogs and I really wish more people would focus on using Blogger, so I'm happy to find your site. Thanks!

Greenlava September 15, 2010 at 8:45 AM    

@Ms. Ileane
You're always welcomed here. To stay current, do consider subscribing.

Anonymous,  September 22, 2010 at 7:54 AM    

Hi, I try to use the code on my blog but the 'Linkwithin' still didn't appear?! Kindly advise.
http://white--gardenia.blogspot.com/

Greenlava September 24, 2010 at 12:39 PM    

@Anonymous
This tutorial is not intended for Blogger classic template. I've tried searching for a classic template tutorial, but to no avail.

IlLusioN October 29, 2010 at 1:11 AM    

I wrote some css tips to style linkwithin widget. If you want change the default design from linkwithin you may have a look to: styling-linkwithin-widget.html

admin November 10, 2010 at 4:12 AM    

thanks. it looks great :)
i like your posts. simple & to the point.

dj Goddessa of Funk Sanctum Radio November 10, 2010 at 11:16 AM    

Hello, from your newest follower and student. You are already so helpful. Thank you.

Greenlava November 10, 2010 at 9:23 PM    

@dj Goddessa of Funk Sanctum Radio
My pleasure. Thanks for following.

Anonymous,  November 17, 2010 at 4:27 AM    

awesome!

Bulma December 11, 2010 at 6:47 AM    

thanks a lot , good post

http://hapatchan.blogspot.com

Liliana December 17, 2010 at 2:09 AM    

I've just done it today. It looks amazing, and so easy with LinkWithin. I was putting it off thinking it takes a lot of effort, how I wish I tried it before!

Thanks again, I've improved my blog so much thanks to your
tips and tutorials on bloggersentral. By following you,
I 've improved design of my blog, and did things I never thought possible with my non-existing programming skills:)

Greenlava December 17, 2010 at 11:47 AM    

@Liliana
I love it when things work out :)

debi December 25, 2010 at 12:29 AM    

Is there a way to center link within under my post? Also, is there a way to get rid of the long border that separates each thumbnail?
Thanks

Greenlava December 25, 2010 at 1:50 AM    

@debi
Go to Design > Template Designer > Advanced > Add CSS and add this inside the text box:
.linkwithin_inner {margin:0 auto !important;}
.linkwithin_posts a {border:none !important;}

Merry Christmas :)

Beny Ricardo Sadewo January 10, 2011 at 9:57 AM    

Dear Green Lava, nice tips, and i'd already use it for my blog, its appear on my post but doesn't shows any realted post,. please help me, can you help me for fix this?


Love,
Beny Ricardo Sadewo
http://www.purple-snap.com/

Greenlava January 11, 2011 at 12:48 AM    

@Beny Ricardo Sadewo
I'm not sure why they don't show up.
Are you sure you've put the correct site id?

Beny Ricardo Sadewo January 11, 2011 at 10:18 AM    

okay, i've already check for ID number, it's correct, but still not display a realted post, check my blog, T_T

Traci Bunkers January 12, 2011 at 1:31 PM    

Thanks for this info! I used your tip III for repositioning related posts display. Is there anyway to pull up "You might also like" to be a little closer to "leave a comment"?

Thanks,
Traci Bunkers
http://www.TraciBunkers.blogspot.com

Greenlava January 12, 2011 at 3:53 PM    

@Traci Bunkers
Add this:
.linkwithin_text {padding: 0px 0 5px !important;}

if that's not enough, add this too:
.post {margin-bottom:0;}

Greenlava January 12, 2011 at 3:57 PM    

@Traci Bunkers
I forgot...add them right before ]]>< /b:skin> line in Design > Edit HTML.

Greenlava January 13, 2011 at 2:02 PM    

@Beny Ricardo Sadewo
I guess it's time to send them (LinkWithin) an email.

DistortYourPhoto January 17, 2011 at 5:10 AM    

Thank god you exisit. i have spent hours and hours trying to find where to place that piece of code and everyones advice on the net was wrong BUT yours. thank you for your imput it was a great help and spot on :) Frank
http://www.distortyourphoto.com/

Ayush Chand January 20, 2011 at 7:54 PM    

If you select "Get Widget" and then click the "Blogger" platform, then the widget will be displayed in the homepage below each post summary. To avoid it, you will have to manually get the code and paste it before "post-footer"

Rumah Dahli January 27, 2011 at 7:33 PM    

thanks, it helps a lot! and it works well on my blog. thanks again!

Greenlava January 27, 2011 at 9:11 PM    

@Rumah Dahli
Great! Hopefully it helps increase your sales.

Carlos February 3, 2011 at 9:55 PM    

Hi!!!

How do I make it to appear in every page... Not only "main page" or posts??? ... In the "contact page", "most read", ...???

Thanks!!!!

Greenlava February 4, 2011 at 8:04 AM    

@Carlos
Hi,
To make it appear on all pages, remove code line 1 and line 8.

A Country Wife February 14, 2011 at 1:12 AM    

Can you please tell me how to change the default thumbnail used by linkwithin? For some reason linkwithin doesn't detect images in the posts I write using blogpress on my iPhone. For these posts linkwithin shows a thumbnail of my signature...

Thank you xx

philbert February 15, 2011 at 5:21 PM    

How do i add more thumbnail..max is 5 iwant it 6...if this is not possible how could I center align the thumbnails.

Greenlava February 16, 2011 at 6:53 PM    

@philbert
Add this CSS snippet in the custom CSS box:
.linkwithin_inner {margin:0 auto;}

Wayne February 17, 2011 at 3:58 AM    

The posts LW shows are not really 'related posts' at all. They have no relation to the main post! Its kind of annoying. Any advice?

Wayne February 17, 2011 at 4:15 AM    

No, I tell a lie. It seems to have sorted itself out :)

As always, thanks again G.

Simply Ridiculous February 24, 2011 at 8:44 AM    

Thanks for the tips...

Best SEO Company February 28, 2011 at 10:19 PM    

That was Awesome,nice post

Marcello,  March 7, 2011 at 1:50 AM    

Hi, it it possible to remove the line around the images of the thumbnails. thanx!

Greenlava March 8, 2011 at 5:07 PM    

@Marcello
I don't think that's possible. The contents lie in an iframe, which makes it impossible to apply CSS to.

Jennifer McKenzie March 12, 2011 at 4:45 AM    

I removed lines 1 and 8 but it is still not showing up on my other pages... is there something else I can do?

Anonymous,  March 18, 2011 at 12:18 PM    

Is there a way to have it pull the posts from the same label only?

Greenlava March 19, 2011 at 12:21 PM    

@Anonymous
For label-based related posts, you might want to try this.

Synz April 8, 2011 at 1:18 AM    

Thank you sooo much! You really help me with my prob. God bless!

Fully Hooked April 9, 2011 at 2:17 AM    

Trying to set this up for my blog--but thumbnails are not showing! Please help!

ബഷീര്‍ Vallikkunnu May 3, 2011 at 2:28 AM    

i want to display 5 posts instead of 3. Even i selected the option of 5 posts, it is the same script I am getting from linkwithin. Moreover the images shown are very old post, nothing sort of posts related to the tags.

Greenlava May 4, 2011 at 9:47 AM    

@ബഷീര്‍ Vallikkunnu
Try the link given in reply #48.

DistortYourPhoto May 22, 2011 at 9:26 PM    

the absolute best information on the web by far. cheers from australia

Quertime June 5, 2011 at 1:51 AM    

Thanks for sharing.
You may check out the post below on How to Install Linkwithin Related Posts with Thumbnails on WordPress
http://www.quertime.com/article/arn-2010-11-09-1-how-to-install-linkwithin-related-posts-with-thumbnails-on-wordpress/

SAJIV MATHEW June 12, 2011 at 4:54 PM    

i generally do not leave comments on many sites...but you, sir are a genius...i almost spent the entire weekend figuring out how to move the linkwithin widget to the absolute bottom of every post...
5 minutes on this site and I was done...feel free to visit my site...http://mathewsajiv.blogspot.com/

Macarena Martinez June 21, 2011 at 5:12 AM    

I agree with everyone here: SOS UN GENIO GREENLAVA! Thank God for this site and for you! By the way, is there a way to show Linkwithin below the post footer? For some reason it shows above in my blog. Thanks so much for your help! YOU ROCK!!! XoXo

Gurjit Singh Khehra June 30, 2011 at 10:32 PM    

Thanks Dear. I have done this successfully with your help. See it:www.worldTricks.co.cc
You wondered me so much..about a year ago i also think to edit this and you have done it. Thanks again.Keep it up.

KiLotr July 13, 2011 at 8:53 PM    

Before I try this, I'm wondering if the "Optional" Step III is possible by itself or if I really need to do step I and II before I can do step III.

Greenlava July 14, 2011 at 6:32 PM    

@KiLotr
If you are new to LinkWithin (ie. you don't have the site ID yet), steps I and II are must-dos.

AryHann July 21, 2011 at 10:03 PM    

Hi, is it possible to change the font of the links-images? If yes, how?

Greenlava July 22, 2011 at 3:05 PM    

@AryHann
Add this CSS snippet into the custom CSS box:

.linkwithin_title {font-family: georgia !important;}

replace "georgia" with your preferred font name.

AryHann July 22, 2011 at 3:54 PM    

Thanks, it worked very good.

zullum August 16, 2011 at 3:50 PM    

It works but it recommends my 3 first posts on every other post. Is thre a way to recommend related stories not just 3 first stories :(

sustahl August 31, 2011 at 6:18 AM    

Thank you for your tutorial! I just added it to my blog.

Eddhie Sutrisno September 9, 2011 at 11:22 AM    

Nice... thanks very much for all your information

Career Mom Online September 10, 2011 at 12:06 PM    

Thank you again for a very informative post. I just installed this widget in my blog. I love it! :D

hairy cub October 7, 2011 at 7:54 AM    

thank you. the widget would not install for me but following your clear instructions, i was able to install it manually.

James October 30, 2011 at 12:31 PM    

Thanks! Discovered another way to spice up my blog. still digging more for other helpful tips in your blog. Keep it up.

BlietXroupista November 2, 2011 at 10:06 AM    

A BIG HUGE ENORMOUS THANKS!!

The Film Connoisseur November 2, 2011 at 11:51 PM    

Can I change an image after Linkwithin has created the link? The reason is because I dont like the image that the link displays and I would like to change it, do you know how to do that?

Greenlava November 3, 2011 at 8:22 PM    

@The Film Connoisseur
I don't think you can change it.

Frank November 11, 2011 at 11:17 AM    

AWESOME! thankyou

Ahmed December 18, 2011 at 5:03 AM    

Thanks bro:this is a great.
i like your posts.simple & to the point.

Mike December 20, 2011 at 5:00 PM    

Hey there, I've got a bit of a problem here.

http://mikeramblesaboutstuff.blogspot.com/

Based on what's on my blog at the moment, I want the link within widget to appear below the Share buttons. I followed your steps for moving it's placement and what it does is place the link within widget below the buttons, but against the grey background instead of the white post body.

Any suggestions to have it placed against the white post body instead?

Greenlava December 21, 2011 at 9:37 PM    

@Mike
Find this code:
[div class='post-footer-line post-footer-line-3'][/div]

and place the linkwithin div right below it, like so:
[div class='post-footer-line post-footer-line-3'][/div]
[div class='linkwithin_div'][/div]

SEO Directory January 1, 2012 at 6:01 AM    

I was just wondering, what's the name of the theme you're using on your site? I really like it!

Greenlava January 2, 2012 at 3:11 PM    

@SEO Directory
It's my own custom template.

missoyaa January 5, 2012 at 9:21 AM    

Thanks!! I try it by editing the html and I failed! Really frustrated. Then, thanks to your tutorial it helps me yeah!

Gardens-In-The-Sand January 12, 2012 at 6:52 AM    

I saw in your replies that you believed this widget couldn't be added to the "classic" blogger.

I chose to get along without this widget for as long as blogger told me to "upgrade". Not gonna happen.

Reading your post gave me the clue I needed to add this neat widget.

Tell people with the classic blogger template to use the code from "other". Works perfectly.
I added a new div around the code on blogger, to customize, but on wordpress I added style info to the empty .linkwithin_inner div.
piece of cake.

ANA January 16, 2012 at 3:56 AM    

I followed your tutorial and everything works perfectly! Thank you! But is there way to pull up the whole linkwithin closer to comments. I followed step III and I used code in comment 28 but it only pulls text up? Thank you in advance!

http://thebasicss.blogspot.com

Greenlava January 17, 2012 at 1:03 AM    

@ANA
The big gap is due to your post footer's bottom margin.
Find this code:
.post-footer {
background-color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
color: #7F7F7F;
font-size: 90%;
line-height: 1.6;
margin: 20px -2px 6em;
padding: 5px 10px;
}

the current bottom margin is 6em. You want to replace it with a smaller value.

ANA January 17, 2012 at 4:30 AM    

Problem fixed! Thank you so much! Keep up the good work!

http://thebasicss.blogspot.com

Sine February 21, 2012 at 5:34 PM    

Thanks VERY much for that tidbit of moving it BELOW your posts and not before the comments, that was driving me crazy and to think it was such a simple lien of code!

Dayse March 10, 2012 at 12:34 AM    

Hello! Thank You very much for the info! Your website is the only place I could find it! :D

I was wondering though, can the "You might Also Like" text be DELETED instead of just edited? I don´t want any text to appear above the thumbnails.

Thanks in advance!

Greenlava March 17, 2012 at 3:21 PM    

@Dayse
You can hide it using CSS, by going to Template Designer > Advanced > Add CSS and adding this snippet:
.linkwithin_text {display: none;}

Carrie March 29, 2012 at 4:17 AM    

That TOTALLY worked! Thank you, thank you! You rock!

Laptop News May 4, 2012 at 3:49 PM    

Hi Thanks you for your advice, but I have new related post same like LinkWithin

Melaka June 29, 2012 at 5:13 PM    

thanks bro, you are Awesom! :D

Top Advertising Networks July 24, 2012 at 11:39 AM    

This what I was looking for.... Thanks pal for providing step by step tutorial...

Eme Jota August 11, 2012 at 7:01 PM    

awesome tutorial! thanks :)

Jang Nina August 29, 2012 at 3:01 PM    

Great! Thanks you very much! I don’t get older. I level up

Jang Nina August 29, 2012 at 3:09 PM    

Great! Thanks you very much! I don’t get older. I level up

Natalia October 16, 2012 at 2:39 AM    

Hi, thanks for this tutorial! I've done everything as you said, but it is still showing only one story (and it is always the same no matter what the post is about) AND there still no thumbnails... I followed steps I and II carefully, and I have customized the phrase, that appears ok, but the rest is still not showing :(
Any advice?

Ari Syrjälä November 15, 2012 at 9:42 PM    

I just want to thank you so much about this very useful post!! Have a beautiful day!

يا جامد November 30, 2012 at 10:33 PM    

you put another related posts plugin .. i want it

Greenlava December 2, 2012 at 3:39 PM    

@يا جامد
I use nRelate. For the tutorial, search for "nRelate" using the search box on the menu bar.

Eric's (Bizz Jana Co) December 4, 2012 at 9:16 AM    

Thank you so much for this information. Level up for me

Clea Gem Banal December 10, 2012 at 12:39 AM    

thank you very much! my blog looks cleaner now.

cleabanal.blogspot.com

djohnna January 13, 2013 at 7:21 PM    

thank u!!! u saved my ass! :)

Peet February 2, 2013 at 4:58 PM    

You are a genius.:) THANK YOU.

Annelise @ Aunie Sauce February 20, 2013 at 5:50 AM    

2 things!

1. What code can I add to change the amount of related posts displayed? I currently only show 4 but would like 6.

2. How do I get the linkwithin "more sauce" or "related posts" text to not be bolded?

www.auniesauce.com

Greenlava February 24, 2013 at 12:46 AM    

@Annelise @ Aunie Sauce
1. Already mentioned in step a)3.
2. Go to Template > Customize > Advanced > Add CSS and paste this CSS rule:
.linkwithin_text {font-weight:normal !important;}
position your cursor at the end of the code and press Enter key.

WWE March 29, 2013 at 11:42 PM    

I have been searching a long time for a solution to center Linkwithin widget. Your comment here is just the answer. Thanks a lot.

I'll subscribe to your site and spend some more time reading useful posts here.

Tiny little reveries May 10, 2013 at 7:04 AM    

Thank you, thank you! I couldn't figure out how to move the darn linkwithin thing and you made it sooo easy. Thanks so much!

Thiago Santos de Moraes May 16, 2013 at 2:38 AM    

Great post! Helpful answers!

Ljubov Ilieva July 19, 2013 at 7:28 PM    

Great Help! Thank you so much!!

Zaira Ivette Sierra October 20, 2013 at 1:47 AM    

I just used section "III. Repositioning related posts display (optional)", on my blog, and it just worked beautifully. Thanks!

Click to go to top Click to comment