Related Post Blogger Widget For AMP HTML

Widget is one important element for a Blog, especially Blogger. By displaying the widget, the display of the blog will be more attractive and neat.

Many widgets are provided by Blogger.com, but there are no widgets that contain Related Posts. But, many Bloggers who outsmart the creation of Related Post widget by using javascript.

If your template is based on AMP HTML this will certainly make your blog invalid AMP. Because third-party Javascript usage is not allowed on the AMP page.

But, this can be tricked by using the <amp-iframe> component and also hosting files on Github. And you can see the Related Post demo demo at the end of this article.



To speed up the installation process, I have created and uploaded an HTML file on Github which we will later use to embed the Related Posts widget. Later you only need to change the URL to your blog address, without having to upload the file on Github.

Widget Related Post Valid AMP

Open the template editor (Edit HTML) on the Blogger.com dashboard.

Make sure you have installed the amp-iframe component before the code </head>. If not, please copy - paste this code:

<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>

Copy the following code at the end of the article, or after your template Footer selector. An example in the Alinux AMP template, the footer class is footer-info. So I copy after the code <div class = 'footer-info'>

<div id='related-post'>


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


&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=6&amp;url=https://www.amp-blogger.com&amp;pos=<data:post.url.canonical/>&#39; frameborder=&#39;0&#39; height=&#39;420&#39; layout=&#39;fixed-height&#39; sandbox=&#39;allow-scripts allow-same-origin allow-popups&#39;&gt;&lt;/amp-iframe&gt;


</div>

Note:

• Change the URL of https://www.amp-blogger with the url of your blog. If it is not replaced, the widget will be an error and related posts will not appear.
• Make sure you have activated SSL / HTTPS on your blog. Please read the article How to activate SSL Blogger if you have not activated it.

To create a style for Heading Related Posts, copy the following CSS in <style amp-custom='amp-custom'>

.relate {


    font-size: 20px;


    padding-top: 15px;


    border-bottom: solid 3px #019688;


    width: 23%;


    position: relative;


    margin: 0 0 10px;


    color: #444;


    font-weight: 500;


    letter-spacing: 1px;


}

To end the process, SAVE changes to your template.

That is the Tutorial for Making AMP Multi Label Related Post. If there is something missing or someone asks, please comment.