How to add Related Posts Widget for Blogger Blogs?

Displaying related posts at the end of each post is an important feature of all modern blogs.

By adding related posts widget on your blogger blog, you are helping your readers to discover more posts of their interest on the blog. Your blog, at the same time, benefits from additional page views among several other benefits.

Follow this tutorial to know more about related posts and implementing related posts widget on your own blog.

What are related posts?

Related posts are links and thumbnails to other related blog posts that are displayed along with the single main post. It is one of the essential features of web design for charities, businesses, and the blog that helps bloggers to increase their page views and search engine optimisation (SEO) aspects. Visitors to the post are certainly interested in knowing more about the topic. Related posts can help them to explore more on the topic from the same blog, thus helping to increase page views. With the help of SEO link building guide companies can provide links to related posts, by means of which both company and bloggers can also benefit from the SEO aspects.

Adding Related Posts Widget for Blogger Blogs

In this Blogger tutorial, I will go through product page examples and few steps to help you add a simple related posts widget for Blogger blog of your own.

Warning: Remember to backup your template before you make any changes to your HTML code, so that you can easily restore if the widget didn’t work for you.

1. From your Blogger Overview, click on the Template link on your left menu. Once you are Template page, click on the “Edit HTML” link under the live preview of your blog. Overview > Template > Edit HTML

2. Press CTRL+F on your keyboard to enable the search box inside your template editing box and search for tag.

  </head> 

3. Copy the code below and paste it just above that tag.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->


Widget Code Configuration:

Height and width of your widget can be customised by changing the figures on highlighted line 8, which is set at 100px (width:100px;height:100px) in the code.
The size and colour of the related posts’ title can be changed by changing the values in the highlighted line 9, which is set at color:#222; and font-size:14px above.
This code will only allow you to display related posts on your single pages. If you want the widget to be displayed also on your homepage, delete the highlighted lines 2 and 12 from the above code.

4. Press CTRL+F again and search for the below code in your template. (In case you found two results for the code, use the code found second time.
<div class='post-footer'>
5. Copy and paste the below code just above the line you found in step 3.

<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


Widget Code Configuration

Edit the value of 5 in maxresults=5; in above highlighted line 11 to display the number of posts that you want to display in your blogger widget.
Similarly, delete the highlighted lines 2, 6, 17 from the above codes if you also want to display the related posts widget on your homepage of the blog.

6. Click on “Save Template” to make changes and with that added successfully, you should now have related posts displayed on your blog.
Other ways to add Related Posts widget
This is certainly not the only way to display related posts widget for Blogger blogs.
There are other external sites such as LinkWithin that enable you to add related posts to your blog with few lines of code. Also, there are plenty of other similar widgets that can enable you to display related posts.
With more and more blogger using customised templates, it, however, becomes difficult to find one widget that fits all.
Also, not surprisingly, most of the custom blogger templates these days have the feature built in their template. If the above widget doesn’t work for you, I recommend checking out another post – Related Posts Widget for Blogger with Thumbnails that I wrote back in 2010.
Let me know if the widget works for you in the comments below.

	

		
		
			
				Blogger Tutorials Blogger Widgets
				
				
					
						 related posts Template Hacks					

							

		
		
		
			 March 4, 2015