May 6th 2018

Related post widgets are a great way to show your readers the related post of that particular label or category. Thus, this increases your blog’s engagement and reduces your bounce rates.

So, if your post has not been labelled, there will be no related post displayed to your readers.

Hence, you should make sure that you have published your blog post indicating labels.

How to add labels to your Blogger posts?

While creating your new post, on the right sidebar, you will find the Labels.

Write the appropriate you want to give to your post and click on Done.

So, let’s come to our main tutorial.

Adding Related post widget to your Blogger blog.

Step 1. Login to your Blogger and select on Template and click on Edit HTML.

Step 2. Just click anywhere inside the HTML editor section and by pressing control + F together search for b:includabe> tag.

Step 3. Paste the below Code just above the code>b:includabe> tag.

    

   class='relatedpoststitle'>RELATED POSTS

Step 4. You have to again search by pressing Control + F together and find the tag

Step 5. Just above the tag, paste the below CSS and JavaScript code.

",document.write(u),h++,h!=relatedPostsNum))&&(o 1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split(" 1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return
r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var
r=0;r

And paste this code as well.

Now, select any styles that are below according to your choice, images have been placed to get the gist, how it would actually look like.

In order to add different styles, you have to follow from step 1 to 3 for each style.

Style No. 1. Beautiful related post widget with post Thumbnails Showing in round format.

The Ultimate Guide to Choosing Perfec…
The Expert's Guide to Perfecting PC G…
Understanding the Disadvantages of So…
LEI Register in the UK: Your Passport…
Is the TP-Link Tapo C100 Security Cam…

",document.write(u),h++,h!=relatedPostsNum))&&(o")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r

2nd Code

Style No. 2. Beautiful related post widget with post thumbnails showing in rectangle format two each on both sides.

2nd Code

Style No. 3. Beautiful related post widget with post thumbnails showing in rectangle format showing in a single line with posts' thumbnails, title and post snippets.

",document.write(u),h++,h!=relatedPostsNum))&&(o")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r

2nd Code

If you find any difficulty in adding the codes, do comment below stating the difficulties you found. Enjoy.

This post first appeared on Wonder Krish, please read the originial post: here