How to Related Post Blogger Widget For AMP HTML
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
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>
<h4 class='relate'>Related Posts</h4>
<amp-iframe src='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 != "true"'>,</b:if></b:loop>&num=6&url=https://www.amp-blogger.com&pos=<data:post.url.canonical/>' frameborder='0' height='420' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-popups'></amp-iframe>
- 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.
border-bottom: solid 3px #019688;
margin: 0 0 10px;
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.