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.
Table of Contents
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 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. Similarly, by providing links to related posts, bloggers can also benefit from the SEO aspects.
Adding Related Posts Widget for Blogger Blogs
In this Blogger tutorial, I will go through 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.
3. Copy the code below and paste it just above that tag.
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.
5. Copy and paste the below code just above the line you found in step 3.
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.