Skip to main content

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 saya akan coba posting tentang cara Membuat Related Post Berdampingan Dengan Iklan AdSense Di Blog AMP HTML.

Sebenarnya artikel ini saya dapatkan dari blog mas Adhy Suryadi, di blog Kompi Ajaib. Namun saya tertarik dan ingin membagikannya di blog ini juga, barangkali ada sahabat blogger yang masih belum tau untuk membuat 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 kode 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>

Ganti url www.wwbsitemini.net dengan domain blog Anda. Kemudian sesuaikan data-ad-client dan data-ad-slot dengan adsense Anda.

You Might Also Like:

Buka Komentar