Membuat Related Posts Berdampingan Dengan Adsense Di Blog AMP

Ini merupakan hasil percobaan Kang Adhy 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/darwinisrin/siijombi.html/master/relatedposts_light.html?url=siijombi.blogspot.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 siijombi.blogspot.com dengan domain blog Anda. Kemudian sesuaikan data-ad-client dan data-ad-slot dengan adsense Anda.

Baca juga : Daftar Lis Iklan (Ads) Yang Suport Amp Html

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;}
}