Cara Membuat Related Post Valid AMP

Cara Membuat Related Post Valid AMP - sebelumnya saya telah membuat related post mirip seperti kompiajaib, kini saya akan membuat related post dengan cara saya sendiri. Cara ini tetap menggunakan amp-iframe untuk meletakan script related post agar valid amp.

Related post valid amp ini cocok dipasang dengan bidang main-content yang tidak terlalu lebar, sehingga akan pas dipandang mata. Berikut caranya...

Masukkan kode html di bawah ini sesuai dengan letak yang kamu inginkan, misalnya kami ingin meletakanya dibawah postingan, maka taruh dibawah kode <data:post.body/>...

<div class='label-line'>
<p class='widget-title'>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/208c89c1/relatedpost.html?fontSize=16px&amp;color=333&amp;url=https://sab-blogger.blogspot.com/&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>

Ganti tulisan ...
https://sab-blogger.blogspot.com/ dengan domain kamu sendiri
fontSize=16px ganti untuk mengatur ukuran font
color=333 ganti untuk mengatur warna font

Setelah itu pasang kode css dibawah ini...

.widget-title {
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 {
position:relative;
}
.label-line {
text-align: center;
margin-top: 20px;
margin-bottom: 6px;
}
.label-line:before {
z-index: 1;
content: "";
width: 100%;
height: 1px;
background: #dddddd;
position: absolute;
top: 50%;
left: 0;
margin-top: -1px;
}

Mudah bukan, itulah tadi tutorial tentang Cara Membuat Related Post Valid AMP dengan mudah, semoga bermanfaat...