Cara Membuat Related Post keren Valid AMP Blogger

Abdi Apr 15, 2018 Apr 15, 2018 3 min read

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>