Membuat Related Post Valid AMP Keren Responsive

Membuat Related Post Valid AMP Keren Responsive
Di Posting Oleh : Admin
Kategori : AMP Blogger Cara Blog Tutorial, Teknologi dan Kesehatan: Mangaip Blog | Berita Terkini dan Terbaru: Terbaru.co.id | Watch Or Download Latest Movie: Filmer Film

Sebenarnya telah poly sekali yang membagikan cara ini, Tetapi tidak ada salahnya apabila aku share ulang menggunakan tampilan design yang sedikit disharmoni menggunakan Relate Post Amp lainnya. Untuk related post ini responsive memakai Tampilan grid pada PC

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: &quot;&quot;; 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>