Friday, July 19, 2019

How To Make A Related Post Valid AMP

How to Make a Related Post Valid AMP Like Kompiajaib - AMP HTML Templates are in great demand for blog developers who have visitor targeting with a mobile platform. Because this type of template has the advantage that it will be very light when opened through a mobile device.
How To Make A Related Post Valid AMP
But these advantages will sacrifice some widgets that are considered very effective for increasing SEO on page, for example related posts. In AMP templates we cannot install related posts because the template has rules that cannot be used in javascript other than those provided by the developer amp.

But with the development of time, the problem cannot make the related post on the amp html be overcome. If we look at the Kompiajaib.com website, there are related posts, but after I check in the Amididator, the website is declared valid. This is quite confusing.

Finally after I searched, I found a way to make the related post valid. The method is quite easy, that is, just make a hmtl amp-iframe that contains javascript content from the relatedpost. More details like the method below ...

How to Make a Valid Related Post AMP
Copy and paste the css code below above the code </ b: skin> or </ style> ...
.share-this-pleaseeeee {
display: inline-block;
margin: 0;
color: #afafaf;
text-transform: uppercase;
font-size: 14px;
background: #fff;
z-index: 1;
position: relative;
padding: 0 10px;
font-weight: 500;
}
.label-line-c {
position:relative;
}
.label-line-c {
text-align: center;
margin-top: 20px;
margin-bottom: 6px;
}
.label-line-c:before {
z-index: 1;
content: "";
width: 100%;
height: 1px;
background: #dddddd;
position: absolute;
top: 50%;
left: 0;
margin-top: -1px;
}
Then copy and paste the html code below according to the location you want, or it can also be under code <data: post.body /> ...
<div class='label-line-c'>
<p class='share-this-pleaseeeee'>Related Post</p>
</div><b:loop values="data:post.labels" var="label"><b:if cond="data:label.isLast == &quot;true&quot;"><amp-iframe expr:src="&quot;https://cdn.staticaly.com/gh/rokim5421/Blog/423b6c06/amprelatedpost.html?fontSize=16px&amp;color=333&amp;url=alamatsitusanda/&amp;label=&quot; + data:label.name" frameborder="0" height="532.84" layout="fixed-height" sandbox="allow-scripts allow-same-origin allow-modals allow-popups">
<amp-img height="532.84" layout="fixed-height" noloading="" placeholder="" src="https://cdn.staticaly.com/img/1.bp.blogspot.com/-x1yVa6ztsWY/WyHFPLG0uLI/AAAAAAAAyIg/3C5Lb5EjGywOPzO_XSwK1XTu6VlBZE4SgCLcBGAs/s1600/back-iframe.png" width="auto">
  </amp-img></amp-iframe></b:if></b:loop>
Change the part that I marked the yellow color with your blog's homepage address ...
How, it's easy not ...

Related post valid amp is suitable for those of you who have a blog with a wide content field, because this related post is designed for blogs that have a part of the game or post width, so the image will look neat. So many of my tutorials on How to Make a Related Post Valid AMP like Kompiajaib. May be useful...


EmoticonEmoticon