Membuat Related Post Berdampingan Dengan Iklan Adsense Di Blog Amp Html

Membuat Related Post Berdampingan Dengan Iklan AdSense Di Blog AMP HTML - Setelah sebelumnya Saya posting Membuat Related Post Valid AMP. Kali ini aku akan coba posting ihwal cara Membuat Related Post Berdampingan Dengan Iklan AdSense Di Blog AMP HTML.

Sebenarnya artikel ini aku dapatkan dari blog mas Adhy Suryadi, di blog Kompi Ajaib. Namun aku tertarik dan ingin membagikannya di blog ini juga, barangkali ada sahabat blogger yang masih belum tau untuk menciptakan Related post berdampingan dengan iklan adsense di blog amp.

Untuk Demonya, silahkan lihat related post di blog ini di bawah artikel (kalau Saya belum menggantinya.. hehe)

Jika Anda ingin memasang related post ini pada blog Anda juga, mari ikuti langkahnya dibawah ini.

Silahkan simpan CSS di bawah ini di style amp-custom untuk untuk halaman 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;}
 }

Kemudian simpan instruksi HTML berikut, di bawah postingan di dalam edit HTML.

 <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.html?url=www.wwbsitemini.net&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>