Related Posts Widget with Thumbnails and Summary for Blogger

There are some old tutorials where you may have seen different ways to display related posts in Blogger, like the related posts widget with thumbnail and the simple related post with title . However, this tutorial will show you how to implement a great related posts widget with thumbnails and post snippets that appear in the footer of all your blog posts.

If you want to get an idea of ​​what it looks like, check out this demo blog .

Now let's see how to add a related articles widget with a thumbnail and a summary in Blogger :

Added Related Articles widget with excerpts from Blogger articles

Step 1: Go to your template in your Blogger dashboard and click Edit HTML .

Step 2: Click anywhere in the code box, then press CTRL+F to open the Blogger search box.

Step 3: Type or paste this tag into the search box and press Enter to find:

Once you've found it, paste this script at the top:

Note:
- To change the number of messages displayed, change the value in red (4).
- To change the number of characters displayed in the message summary , change the value to green (75).
- To change the default photo for posts without an image, add your URL instead of the blue one
Step 4. After adding the script, we need to add the CSS styles. Paste the following code above Tag:

Customize the related posts widget:

- Change the value to red ( 120px ) to adjust the width of the widget
- Replace #linkcolor with your hex color value to change the article title color
- If you want to change the size of the thumbnail, change the value marked in purple ( 82px )
- To determine the roundness of the edge, change the values ​​to orange (50%)
- To change the message body color, change #summarycolor to the hex value of the color

Step 5. Then find this code snippet (CTRL+F):

Once found, press the side arrow to expand the code and scroll down until you find it - See screenshot for more help:



Step 6. directly above him Add the following HTML code: