Cara Membuat Related Post Valid AMP Keren & Responsive

by

Cara Membuat Related Post Keren Untuk Blog AMP – Pada postingan yang sebelumnya saya pernah posting cara membuat sitemap di halaman statik blog AMP HTML. Dan pada kesempatan kali ini kami 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 kami share ulang dengan tampilan design yang sedikit berbeda dengan related post AMP lainnya.

Cara Membuat Related Post Valid AMP Keren & Responsive
Cara Membuat Related Post Valid AMP Keren

Untuk related post ini responsive dengan tampilan grid di PC dan tampilan responsive untuk Mobile serta 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 ini ini juga sangat mudah, hanya beberapa langkah saja. Jika kalian ingin memasang related post di blog AMP, langsung saja simak langkah-langkah pemasangannya dibawah ini.

Cara Membuat Related Post Keren Untuk Blog AMP

  • Langkah pertama, silahkan masuk ke Dasbord Blogger > Template > Edit HTML.
  • Kemudian silahkan tambahkan CSS dibawah ini dan letakkan 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/?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, silahkan klik Simpan Template dan lihat hasilnya.
  • Selesai.

Demikianlah untuk artikel kali ini tentang cara membuat related post valid AMP keren & responsive. Semoga bermanfaat untuk teman-teman semuanya!

Leave a Comment