Related Posts Widget with Thumbnails and Summary for Blogger

There are several tutorials quite old in which you have seen different methods for displaying related posts in Blogger like the related posts widget with thumbnails and simple related posts with post titles only. This tutorial, however, will show you how to implement a really awesome Related Posts widget with thumbnails and posts snippets that will appear in the footer of all your blog posts.

If you want to get an idea of how it looks like, please visit this demo blog.

Now let's see how to add the related posts widget with thumbnails and summary in Blogger:

Adding Related Posts Widget with Snippets to Blogger Posts

Step 1. From your Blogger Dashboard, go to Template and click on Edit HTML

Step 2. Click anywhere inside the code area and then press CTRL + F to open the Blogger search box

Step 3. Type or paste this tag inside the search box and hit enter to find it:

After you found it, paste this script just above it:

Note:
- To change the number of posts that are being displayed, modify the value in red (4)
- To change the number of characters to be shown in posts summary, modify the value in green (75)
- To change the default pic for posts with no images, add your URL instead of the one marked in blue
Step 4. Now that we added the script, we will need to add the CSS style. Just paste the following code above the same tag:

Customizing the Related Posts Widget:

- Modify the value in red (120px) to adjust the width of the widget area
- Replace #linkcolor with the hex value of your color to change the color of post titles
- If you want to change the size of thumbnails, modify the values marked in violet (82px)
- To determine the border roundness, modify the values in orange (50%)
- To change the color of the post snippet, change #summarycolor with color hex value

Step 5. Next, search (CTRL + F) for the following code snippet:

When you find it, click the sideways arrow to expand the code and scroll down until you find - see the screenshot for more help:



Step 6. Just ABOVE the tag, add the following html code: