Related Posts Widget Amongst Thumbnails As Well As Summary For Blogger

There are several tutorials quite former inwards which yous bring seen dissimilar methods for displaying related posts inwards Blogger similar the related posts widget alongside thumbnails as well as simple related posts alongside postal service titles only. This tutorial, however, volition demonstrate yous how to implement a actually awesome Related Posts widget alongside thumbnails as well as posts snippets that volition appear inwards the footer of all your spider web log posts.

If yous desire to instruct an sentiment of how it looks like, delight catch this demo blog.

Now let's run into how to add together the related posts widget alongside thumbnails as well as summary inwards Blogger:

Adding Related Posts Widget alongside Snippets to Blogger Posts

Step 1. From your Blogger Dashboard, become to Template as well as click on Edit HTML

Step 2. Click anywhere within the code expanse as well as and thus press CTRL + F to opened upward the Blogger search box

Step 3. Type or glue this tag within the search box as well as hitting instruct inwards to notice it:

After yous institute it, glue this script simply inwards a higher identify it:

Note:
- To alter the release of posts that are existence displayed, modify the value inwards scarlet (4)
- To alter the release of characters to hold upward shown inwards posts summary, modify the value inwards light-green (75)
- To alter the default pic for posts alongside no images, add together your URL instead of the 1 marked inwards bluish
Step 4. Now that nosotros added the script, nosotros volition postulate to add together the CSS style. Just glue the next code inwards a higher identify the same tag:

Customizing the Related Posts Widget:

- Modify the value inwards scarlet (120px) to conform the width of the widget area
- Replace #linkcolor alongside the hex value of your color to alter the color of postal service titles
- If yous desire to alter the size of thumbnails, modify the values marked inwards purple (82px)
- To arrive at upward one's hear the edge roundness, modify the values inwards orangish (50%)
- To alter the color of the postal service snippet, alter #summarycolor alongside color hex value

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

When yous notice it, click the sideways arrow to expand the code as well as scroll downwards until yous notice - run into the screenshot for to a greater extent than help:



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

   

   

 

Screenshot

Step 7. Click on the "Save Template" push to relieve the changes as well as you're done!

Note: inwards representative yous run into the 'undefined' message, brand certain that yous bring added the appropriate labels to your posts - which tin ship away hold upward institute inwards at to the lowest degree 1 to a greater extent than post, otherwise the script mightiness non hold upward able to notice whatsoever related posts for that entry.