Membuat Related Posts Berdampingan Dengan Adsense Di Blogger AMP HTML

Ditulis oleh: Adhy Suryadi

Ditulis pada: 1/20/2017

Sebenarnya ini merupakan hasil percobaan dalam meletakan iklan adsense agar dapat meningkatkan penghasilan. Salah satunya mencoba unit iklan tinggi 600px di area postingan di desktop dan mobile.

Mencari lokasi yang tepat untuk menerapkan iklan tinggi 600px, akhirnya tempat yang pas adalah disimpan bersebelahan dengan related posts. Namun untuk tampilan mobile, unit iklan berada di bawah related posts, namun tetap menampilkan iklan tinggi 600px.

Untuk penampakannya bisa lihat di bawah postingan ini atau pada thumbnail di atas.

Jika Anda ingin mencobanya juga, silahkan copy kode-kode di bawah ini.

Silahkan simpan kode HTML 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.kompiajaib.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>

Ganti kode www.kompiajaib.com dengan domain blog Anda. Kemudian sesuaikan data-ad-client dan data-ad-slot dengan adsense Anda.

Kemudian silahkan simpan CSS di bawah ini di style amp-custom 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;}

}