Membuat Related Posts Berdampingan Dengan Adsense Di Blogger Amp Html

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

Mencari lokasi yang sempurna untuk menerapkan iklan tinggi 600px, kesannya daerah yang pas yakni disimpan bersebelahan dengan related posts. Namun untuk tampilan mobile, unit iklan berada di bawah related posts, namun tetap menampilkan iklan tinggi 600px.

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

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

Silahkan simpan instruksi 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 instruksi 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;}
 }

Sumber https://www.kompiajaib.com/

Share this post