Skip to main content

Membuat Related Posts Berdampingan Dengan Adsense Di Blogger AMP HTML

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


Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB