Cara Membuat Related Post keren Valid AMP Blogger

by

Cara Membuat Related Post keren Valid AMP Blogger – Padakesempatan kali ini saya akan berbagi cara bagaimana cara membuat related post keren untuk blog yang sudah valid AmP,yang mana Related post ini nantinya akan tampil dibawah postingan dan berdampingan dengan adsense.Untuk Demonya silhkan ana lihat diblog ini dibawah postingan, (jika saya belum mengubahnya)

Jika anda berminat silahkan anda ikuti Cara penerapanya atau pemasanganya dibawah ini :

  • Pertama silhakan masuk Blogger > Template > Edit Template
  • Jika Sudah Di edit Template Langkah selanjutnya silahkan tambahkan kode js Amp-iframe Dibawah ini 

    <script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

    Dan silahkan anda letakan ata paste di atas kode head, agar lebih mudah mencarinya silhkan klik ctrl+f dan cari kode async taruh disitu bersama kode js js lainy. jika kode amp-iframe sudah ada, lewati saja.

  • Kemudian Silahkan anda salin kode CSS di bawah ini dan letakan di style amp-custom Untuk tampilan postingan 

     .related-post{margin:20px 20px 0;padding:0}
    .related-post h4{font-size:20px;margin:0 0 10px;}
    .related-post .underpost1,.related-post .underpost2{width:50%;display:inline-block;float:left;}
    .related-post .underpost1{margin-bottom:10px;}
    .related-post .underpost2{margin:20px 0;}
    .clear{clear:both;}
    @media screen and (max-width:414px){
    .related-post .underpost1,.related-post .underpost2{width:100%;display:block;float:none;}
    .related-post .underpost1{margin-bottom:0;}
    .related-post .underpost2{margin:20px 0 0;}
    }

  • Jika sudah Sekarang silahkan Copy Kode HTML nya dibawah ini dan letakan di Dalam HTML Postingan letakan dibawahnya. 

     <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='related-post'>
    <h4>You Might Also Like:</h4>
    <div class='underpost1'>
    <b:if cond='data:post.labels'>
     <b:loop index='x' values='data:post.labels' var='label'>
       <b:if cond='data:x==0'>
    <amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/relatedposts_light/?url=www.dulbjn.com&amp;label=&quot; + data:label.name' frameborder='0' height='620' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'>
    </amp-iframe>
       </b:if>
     </b:loop>
    </b:if>
    </div>
    <div class='underpost2'>
    <amp-ad data-ad-client='ca-pub-2124282593xxxxxx' data-ad-slot='xxxxxxxxxx' height='600' layout='fixed-height' type='adsense'>
    </amp-ad>
    </div>
    <div class='clear'/>
    </div>
    </b:if>
  • Silahkan anda ganti Kode yang saya tandai diatas www.dulbjn.com dengan url blog yang anda pakai.
  • Terakhir Klik Simpan Template, dan silahkan anda lihat Tampilanya di bawah postingan atau artikel anda.
  • selesai.

    Mungkin hanya itu saja untuk artikel saat ini tentang Cara Membuat Related Post keren Valid AMP Blogger Semoga bermanfaat.
    Cara Membuat Related Post keren Valid AMP Blogger

    • Leave a Comment