Beranda
Blogger

6 Koleksi Related Post Keren Suport Template AMP dan Non AMP

Pada postingan sebelumnya Admin telah membahas tutorial bagaimana cara mengganti tampilan bawaan related post dari Grid Style menjadi Statis Style dan sebaliknya dari tampilan Style menjadi Grid Style pada template blogger versi AMP dan Non AMP.

Pada kesempatan ini Admin akan membagian koleksi Source Kode Related Post yang diambil dari beberapa template premium yang mungkin sudah tidak asing lagi bagi para blogger indonesia. Berikut ini kode Widget Related Post Keren Suport Template AMP dan Non AMP:

Related Post Ala Arlina Design Infinite AMP

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

Related Post Ala Kang Ismet

Untuk preview gambar pada screenshot di atas kosong karena kebetulan postingan blog memang tidak menyertakan gambar tampilan home page postingan 
 
  <b:if cond='data:blog.pageType == &quot;item&quot;'> 
  <amp-iframe expr:src='&quot;https://cdn.rawgit.com/kangismet/ki-html/master/random-posts2.html?url=&quot; + data:blog.homepageUrl' frameborder='0' height='375' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
  <div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Artikel Terkait:</div>
  </amp-iframe>
  <div class='clear'>
  </div>
  </b:if>

Related Post Ala Bang Adhy Suryadi Kompi Ajaib

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

Related Post Ala MDC

Untuk preview gambar pada screenshot di atas kosong karena kebetulan postingan blog memang tidak menyertakan gambar tampilan home page postingan 
 
  <amp-iframe expr:src='&quot;https://cdn.rawgit.com/MDCSite/mdc/master/ampready.html?label=&quot; + data:label.name + &quot;&amp;url=&quot; + data:blog.homepageUrl' frameborder='0' height='410' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='650'>
  <div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related Posts</div>
  </amp-iframe>

Related Post Ala ManKoin

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

Related Post Ala AMP Le Grid Bahas Tutorial

 
  <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
  <!-- Seccion Random post Entry -->
  <amp-iframe frameborder='0' height='330' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' src='https://rawcdn.githack.com/bahastutorial/ampbahastutorial/ce792bce89e292cf9c07cc35f5984af5b8ced7ae/realetedpostamp.html?url=https://bahastutorial.com/' width='600'>
  <div aria-label='Random Post' overflow='' role='button' tabindex='0'>Banyak Dibaca</div>
  </amp-iframe>
  <!-- Fin Seccion -->
  </b:if>

Silahkan dipilih diantara 6 tampilan Widget Related Post diatas yang anda suka, Untuk cara pemasangannya silahkan kunjung Tutorial Cara Mengubah Tampilan Related Post Menjadi Statis dan Grid Style.


Ingin berlangganan Notifikasi Update Postingan Terbaru? Silahkan Gabung Berbagi Tutorial Online WhatsApp Grup atau Follow Berbagi Tutorial On Google News. Yuk...Subscribe Channel Youtube Berbagi Tutorial Online bagi Kalian yang suka dengan Tutorial dalam bentuk Rekaman Video.

Posting Komentar