A Simple Related Posts Widget For Blogger

In the last tutorial, we wrote about how to add the Related Posts widget with thumbnails in Blogger to display related posts from the same category based on the given labels, which would appear just at the end of your blog posts. However, maybe some of you may prefer a simple version of this related posts widget to display only the posts titles.

If you want to add it, follow the next steps below:

How to add Related Posts Widget to Blogger

Step 1. Go to 'Template' and hit the 'Edit HTML' button.

Step 2. Once the template editor opens, click anywhere inside the code area and press the CTRL + F keys, then type the following tag inside the search box (hit Enter to find it):

Step 3. Just above the tag, paste the following CSS code:

Customizing Simple Related Posts widget for Blogger

- To change the size (27px) and color (#fff) of 'Related Posts' title, change the values in red.
- For the related post link color, replace the #949494 value in green.
- To change the background color, replace the #f9f9f9 hex color in red.
- For the background color on mouseover, change the #F4F4F4 value in red.

Note: You can use this Color code generator to pick your favourite color.

Step 4. Now that we added the script to make the related posts work, we need to add the code that will display it at the end of our blog posts. Find the line below:

Step 5. Once you found it, you need to click the sideways arrow that will expand the code. Scroll down until you find the tag - see the screenshot for more info:



Step 6. Just above the tag, paste the code below:

Note: To change the number of maximum related posts for each label, change the "5" value from max-results=5

Step 7. Save the changes by clicking the 'Save Template' button and visit your blog. Now, go to any of your posts to see this simple related posts widget for Blogger in action.