Membuat Related Post Valid AMP Keren Responsive

BLOGS GOBLOG | Cara Membuat Related Post Keren Untuk Blog AMP - Pada postingan yang sebelumnya saya pernah posting Cara Membuat Sitemap di Halaman Static Untuk Blog AMP HTML. Dan pada kesempatan kali ini Saya akan coba mengulas artikel Cara Membuat Related Post Keren dan Responsive Untuk Blog Valid AMP HTML.

Sebenarnya sudah banyak sekali yang membagikan cara ini, Namun tidak ada salahnya jika saya share ulang dengan tampilan design yang sedikit berbeda dengan Relate Post Amp lainnya. Untuk related post ini responsive dengan Tampilan grid di PC dan tampilan responsive untuk Mobile. dan yang paling terpenting pastinya sudah Valid AMP HTML, jadi aman untuk kalian pakai pada Template Blogger yang Valid AMP. untuk demonya bisa kalian lihat dibawah ini jika masih tersedia.

DEMO

Untuk cara pemasangan Related Post ini juga sangat mudah, hanya beberapa langkah saja. jika kalian ingin memasang related post di blog AMP, langsung saja simak langkah-langkah pemasangannya berikut ini.

Cara Memasang Related Post Keren Valid AMP

Langkah pertama, silahkan ke masuk Dasbord Blogger > Template > Edit HTML. Kemudian silahkan tambahkan CSS di bawah ini dibawah kode <style amp-custom='amp-custom'> untuk tampilan css postingan blog PC maupun Mobile.

/* Related Post Blogs Goblog*/
#related-posts {background:#fff;font-size:16px;margin:0;padding:20px;}
.share-this-blogs {
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-blogs {
position:relative;
}
.label-line-blogs {
text-align: center;
margin-top: 20px;
margin-bottom: 6px;
}
.label-line-blogs:before {
z-index: 1;
content: "";
width: 100%;
height: 1px;
background: #dddddd;
position: absolute;
top: 50%;
left: 0;
margin-top: -1px;
}

Kemudian silahkan simpan kode dibawah ini sesuai tata letak HTML Postingan yang kalian inginkan. lebih tepatnya kalian dapat menaruhnya diatas kode </article> ataupun dibawah kode <data:post.body/>

<!--Related Post Blogs Goblog-->
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class='label-line-blogs'>
<p class='share-this-blogs'>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.statically.io/gh/dulbjn/Html/e625d955/relatedpostamp.html?fontSize=16px&amp;color=333&amp;url=https://www.genyo.id/&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>
</b:if>

Keterangan

Silahkan ganti kode atau url https://www.genyo.id yang saya tandai dengan alamat url blog kalian masing-masing.

Langkah Terakhir, Kemudian klik Simpan Template dan lihat hasilnya.

Selesai. mungkin hanya itu saja untuk artikel kali ini tentang Cara Membuat Related Post Keren Untuk Blog Valid AMP HTML. Semoga bermanfaat.