Skip to main content

Kumpulan Related Post Blog AMP Keren Responsive

Kumpulan Related Post Blog AMP Keren Responsive
Assalamualaikum sobat blogger. Masih semangat nulis kan, tidak hanya menulis tampilan dan fitur blog juga harus menarik ya agar pengunjung tetap nyaman. Adapun fitur yang menurut saya sangat penting yaitu seperti artikel terkait.

Blog valid AMP HTML, untuk menambahkan fitur tersebut mendapati sedikit kesulitan, Kita ketahui Google AMP memiliki aturan tersendiri dalam pemasangan JS. Dan related post sendiri tidak lepas dari penghunaan script.

Sebagai gantinya agar tetap valid AMP. Kode JS diletakan di luar blog. dan menampilkannya dengan <amp-iframe></amp-iframe>

Berikut kumpulan kode dan cara membuat Related post valid amp.

Kumpulan Kode Related Post Valid AMP

Berikut Kode Artikel terkait yang dapat digunakan pada blog agar tetap valid AMP. 


  <b:if 1cond='data:blog.pageType 1== 1&quot;item&quot;'> 1
  <amp-iframe 1expr:src='&quot;https://cdn.rawgit.com/kangismet/ki-html/master/random-posts2.html?url=&quot; 1+ 1data:blog.homepageUrl' 1frameborder='0' 1height='375' 1layout='responsive' 1resizable='resizable' 1sandbox='allow-scripts 1allow-same-origin 1allow-modals 1allow-popups' 1width='600'>
  <div 1aria-label='Related 1Posts' 1overflow='' 1role='button' 1tabindex='0'>Artikel 1Terkait:</div>
  </amp-iframe>
  <div 1class='clear'>
  </div>
  </b:if>





  <amp-iframe 2frameborder='0' 2height='420' 2layout='fixed-height' 2sandbox='allow-scripts 2allow-same-origin 2allow-modals 2allow-popups' 2src='https://cdn.rawgit.com/Arlina-Design/redvision/7859a5d0/relatedamp.html?url=miisqin.blogspot.com&amp;color=222'>
  </amp-iframe>





  <b:if 3cond='data:blog.pageType 3== 3&quot;item&quot;'> 3
  <amp-iframe 3expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/amp/master/random-posts.html?url=&quot; 3+ 3data:blog.homepageUrl' 3frameborder='0' 3height='320' 3layout='responsive' 3resizable='resizable' 3sandbox='allow-scripts 3allow-same-origin 3allow-modals 3allow-popups' 3width='600'>
  <div 3aria-label='Related 3Posts' 3overflow='' 3role='button' 3tabindex='0'>Related 3Posts</div>
  </amp-iframe><div 3class='clear'></div></b:if>





  <amp-iframe 4expr:src='&quot;https://cdn.rawgit.com/MDCSite/mdc/master/ampready.html?label=&quot; 4+ 4data:label.name 4+ 4&quot;&amp;url=&quot; 4+ 4data:blog.homepageUrl' 4frameborder='0' 4height='410' 4layout='responsive' 4resizable='resizable' 4sandbox='allow-scripts 4allow-same-origin 4allow-modals 4allow-popups' 4width='650'>
  <div 4aria-label='Related 4Posts' 4overflow='' 4role='button' 4tabindex='0'>Related 4Posts</div>
  </amp-iframe>





  <div 5id='related-post'><h4><span>Baca 5Juga</span></h4>&lt;amp-iframe 5src=&#39;https://cdn.rawgit.com/ManKoin/Hosting/9a8fb879/relatedpostssl.html?labels=<b:loop 5values='data:post.labels' 5var='label'><data:label.name/><b:if 5cond='data:label.isLast 5!= 5&quot;true&quot;'>,</b:if></b:loop>&amp;num=5&amp;url=https://miisqin.blogspot.com/&amp;pos=<data:post.url/>&#39; 5frameborder=&#39;0&#39; 5height=&#39;420&#39; 5layout=&#39;fixed-height&#39; 5sandbox=&#39;allow-scripts 5allow-same-origin 5allow-popups&#39;&gt;&lt;/amp-iframe&gt;</div>





  <amp-iframe 6frameborder='0' 6height='400' 6layout='responsive' 6resizable='resizable' 6sandbox='allow-scripts 6allow-same-origin 6allow-modals 6allow-popups' 6src='https://cdn.rawgit.com/kangismet/ki-html/master/random-posts2.html?url=https://miisqin.blogspot.com/' 6width='600'>
  <div 6aria-label='Related 6Posts' 6overflow='' 6role='button' 6tabindex='0'>Artikel 6Terkait:</div>
  </amp-iframe>


Ubah URL blog dengan URL home page anda.


Cara Memasang Related Post AMP

Munkin ada sebagian yang belum tau cara pemasangannya. berikut dapat anda ikuti langkah-langkahnya dibawah.

1. Masuk Blogger > Pilih Tema > Edit HTML.

2. Cari kode <b:includable id='relatedposts'>...Kode Related AMP..</b:includable> atau yang hampir mirip.

Perbedaan paling sering terdapat pada id nya : id='relatedposts'
3. Hapus semua kode Relatednya. Masukan salah satu kode diatas.

4. Simpan Tema.

Pastikan kembali pada template atau tema sudah terdapat <script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

Tambahkan :

  • Agar bekerja tambahkan Label.
  • Jangan gunakan feed Tidak ada.

    • Labels:
    Location: Indonesia