Related Posts Widget with Thumbnails and Summary for Blogger

There are many old tutorials where I look at different ways to view related posts in Blogger, such as the puzzle with related post thumbnails and simple posts related only to post titles . However, this tutorial will show you how to create a very nice thumbnail and puzzle post excerpt that will appear at the bottom of all your blog posts.

To get an idea of ​​what it looks like, visit this demo blog .

Let's see how to add related post thumbnails and quick puzzles to Blogger :

Add the related blog post part to the related blog post

First step. In the Blogger panel, go to the form and click Edit HTML .

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

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

Once you find it, paste this script into it:

NOTE:
- To change the number of posts displayed, change the value highlighted in red (4).
- To change the number of characters displayed in the position summary, change the value to green (75).
- To change the default image for unsent images, add your own URL instead of the one highlighted in blue .
Step 4 Now that we've added the font, we need to add a CSS style. Paste the following code into the same logo tab:

Set the functions related to the instrument:

- Change the value in red ( 120px ) to set the width of the tab margin.
- Replace #linkcolor with the hex value of your color to change the color of the post titles.
- If you want to change the size of the thumbnails, adjust the values ​​indicated in purple ( 82px ).
- To set the rotation limit, set the values ​​to orange (50%)
- To change the color of the details, change the #summarycolor color to a hexadecimal value.

Step 5. Then find the following code (CTRL + F):

When you get it, click the arrow to expand the icon and scroll down to find it. See screenshot for further help:



Step 6. Not higher add this html code: