How to add related posts with thumbnails using LinkWithin

LinkWithin is a free service offered by a small team based in New York. With LinkWithin, users can display related posts linking to the related stories from your blog archive under each individual postings. Related posts is a good thing to have on your blog because it keeps your readers engaged with your content, thus, increasing page views on your blog. The LinkWithin related posts widget generates a minimally styled design to blend in with your site and best of all, its free, ad-free, and only takes a minute to get the widget up and running on your blog with no signup required.

Steps to follow:

1. Visit the LinkWithin website here.

2. Enter your email, blog link, and under platform option, select “Blogger”, and for the width, choose how many items you want to display for your related posts (3, 4, or 5 stories). Select the “My blog has a light text on a dark background” if that pertains to your template and then hit the “Get Widget!” button. Here’s a screen shot of mine:


3. After you clicked the “Get Widget!” button, LinkWithin takes you to the installation page. Select the “Install Widget” button to open Blogger up in a new window.


4. Next, select a blog, if you have more than one, then click “Add Widget”


5. Once your LinkWithin widget has been added to your blog, it will appear on the sidebar widget, but move it under your “Blog Posts”. Here’s a screenshot of mine:



6. Next, select save and your done. Your LinkWithin widget should now appear on your blog.

** Tutorial completed.

How to add related posts underneath your posts

From this tutorial, you will be able to add a related posts widget right under your posts. Having a related posts section for your blog can really be user friendly for your readers and definitely boost the average time on site. Most of the time, readers who find your post interesting will dig in for more, and what’s more user-friendly then a related posts section right under that post.

You will need these file(s) for this tutorial:

	related_posts.js
	rss.png
	relatedposts.zip

To add related posts underneath your posts:

1. From your Blogger dashboard, navigate to Layouts and then Edit HTML.

2. Add the following javascript link below right after the opening head tag of your blog: <script src='../related_posts.js' type='text/javascript'/>

3. Next, you will need to search for this section code: <data:post.body/> and copy and paste the section code below right after it.

<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'> <span id="preservea89983fd815645d2aab10fb455309b9a" class="wlWriterPreserve"><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script></span> </div></b:if>

Add style with CSS:

4. Next, you will need to add the CSS section code the footer. To do this, copy and paste the following section code below right before: ]]></b:skin>

/* Related Posts ----------------------------------------------- */ #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { color : #940f04; font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { color : #054474; font-size : 11px; text-decoration : none; } #related-posts a:hover { color : #054474; text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("../rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 16px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }

Note: Remember to change “../rss.png” to your link location.

5. You should preview your blog first to see if all codes have been implemented correctly. If so, save your template and you’re finished.