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.
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
/* 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;
}
<!--Related Post Blogs Goblog-->
<b:if cond='data:blog.pageType == "item"'>
<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 == "true"'><amp-iframe expr:src='"https://cdn.statically.io/gh/dulbjn/Html/e625d955/relatedpostamp.html?fontSize=16px&color=333&url=https://www.genyo.id/&label=" + 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.
Selesai. mungkin hanya itu saja untuk artikel kali ini tentang Cara Membuat Related Post Keren Untuk Blog Valid AMP HTML. Semoga bermanfaat.
Tinggalkan komentar