Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / AMP / Blogger / Cara

Membuat Related Post Valid AMP Keren Responsive

Posting Komentar

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>

    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.

    Posting Komentar untuk "Membuat Related Post Valid AMP Keren Responsive"