How To Add Related Posts Widget In Blogger/Blogspot Posts(AMP Valid)

Everyone wants to make their website look pretty good from others and its all because to increase their traffic and reduce bounce rate in their website.

A related posts widget can also be used to attract more new visitors because it reduces bounce rate and it can be helpful for huge organic traffic.

But when we talk about blogger then we don’t find such tools to build these widgets in our blogger website.

Read Fact: World's Most Expensive House? Ever Made 2021

But not to worry, We will now add a pretty look Related Posts widget in our BlogSpot to increase our traffic.

So, without wasting a second we will look for the code to create a RELATED POSTS Widget.

Searching for web Hosting for your website... Try my recommended Hosting

Add Related Posts Widget In Blogger Post

Table of contents:

1. About Related Posts.

2. Steps To Add Related Posts.

First, we will understand About related posts widget.

A related Posts widget is a widget in a blogger which shows some posts related to its categories and label.

Must Read: Make Article Anti Copy-paste In Blogger

Hope you understand, If not then look for the below example to understand it better.

Example: If you are reading an article related to label seo then at the last of your post you will see related posts widget related to only seo label. In this way a Related Posts Widget Works.

Now we will see the steps to create a Related Posts widget.

Searching for web Hosting for your website... Try my recommended Hosting

If you want to see live Related Post then browse at the last of this article to see Related Posts.

Follow These Steps To Add Related Posts Widget In A Blogger Post:

Note: This code is only applicable for AMP website.

• Open Blogger dashboard.
• Click on theme section, and click edit html.
• Then search <style amp custom=‘amp custom’> by Ctrl + F button.
• And then place the CSS code given below after this <style amp custom=‘amp custom'>.

.relate { font-size: 40px; padding-top: 15px; border-bottom: solid 4px #FFA550; width: 100%; position: relative; margin: 0 0 10px; color: #444; font-weight: 800; letter-spacing: 1px; }

And then search below code in your Blogger HTML. 

 <div class='post-footer'> 

 <div class='post-footer-line post-footer-line-1'>

After the above code add this code below it.

<div id='related-post'>

<h2 class='relate'>Related Posts</h2>

&lt;amp-iframe src=&#39;https://cdn.rawgit.com/hafidm93/HTML/0a97af9b/relatedalinux.html?labels=<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>&amp;num=4&amp;url=https://affizoo.blogspot.com&amp;pos=<data:post.url.canonical/>&#39; frameborder=&#39;0&#39; height=&#39;460&#39; layout=&#39;fixed-height&#39; sandbox=&#39;allow-scripts allow-same-origin allow-popups&#39;&gt;&lt;/amp-iframe&gt;

</div>

Don't forget to change the website URL with your URL.

• And then save the template.

Yes its all you have to do while creating a Related Posts widget. And now you can gain more visitors which will help you rank well in your website. If it doesn't works or if you are not happy with this than comment me to solve this issue.

Must Read: 7 Best Tips & Tricks to get successful in affiliate marketing

Congrats! Today you learned more about How To Add Related Posts Widget In Blogger/Blogspot Posts(AMP Valid) so always be the first to comment us and tell how helpful is this article.

Thanking you! For giving your precious time to us. 

Please visit us again...