Blogger Related Posts with Thumbnails: LinkWithin

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. 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. Go 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!