Cara Mudah Membuat Iklan Adsense Scroll Parallax Dibawah Judul Valid AMP

by

Download Template Mirip Kompi Ajaib Valid AMP (Clone) Terbaru
Cara Mudah Membuat Iklan Adsense Scroll Parallax Dibawah Judul Valid AMP Membuat Iklan adsense lebih menarik dan semenarik mungkin dengan membuat unit iklan adsense diam saat di scrool dan adsense tetap diam ditempat saat mouse di gulir ke bawah.jika dilihat sangat menarik juga,tapi cara ini khusus untuk blog yang sudah valid AMP. bila anda pernah melihat iklan seperti itu itulah yang namanya iklan parallax seperti di situs detik.com tapi situs detik.com penempatan iklanya ada ditengah artikel untuk cara yang saya akan share ini berada di bawah judul post. untuk melihatnya lebih jelas silahkan lihat di blog saya ini. genyo.id sebenarnya cara ini saya dapatkan di blog kompi ajaib dan saya berminat untuk mencobanya. jika anda berminat silahkan simak tutorialnya dibawah ini.

Baca Juga : Cara buat Widget Kotak Berlangganan Valid AMP

Untuk membuatnya syaratnya blog anda harus valid AMP ya,Langsung saja

Cara Mudah Membuat Iklan Adsense Scrool Parallax Dibawah Judul Valid AMP

  • Pertama yang harus anda lakukan adalah memasang kode js amp-fx-flying-carpet di bawah ini.

<script async='async' custom-element='amp-fx-flying-carpet' src='https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js'></script>
  • Letakan kode nya di atas kode <head/> atau Untuk mempermudah pencarian klik ctl+f cari code async dan letakan di situ bersama js js lainya.Jika kode js sudah ada silahkan lewati saja.
  • Kemudaian silahkan anda copy kode css di bawah ini.

.ads-atas {
  padding-top: 0px;
  width: 300px;
  margin: 0px 10px 0px 0px;
  display: inline;
  float: left
}
.ads-atas amp-ad {
  margin-top: 45px
}


/* Mobile */
@media screen and (max-width: 414px){
.ads-atas{padding-top: 0px;
    width: 100%;
    height: auto;
    margin: 0 0 10px;
    display: block;
    float: none;text-align:center}
.ads-atas amp-ad {
  margin-top: 60px
}
  • Letakan di <style amp-custom='amp-custom'> Untuk css Tampilan Postingan.
  • Silahkan atur margin-top: sesuai tinggi header template blog anda agar unit iklan tampil sesuai.
  • Kemudian langkah selanjutnya Copy kode html pemanggilnya dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ads-atas'>
<amp-fx-flying-carpet height='250px'>
<amp-ad data-ad-client='ca-pub-281965xxxxxxxxxx' data-ad-slot='221076xxxx' height='600' layout='fixed-height' type='adsense'> 
 </amp-ad>
</amp-fx-flying-carpet>
  </div>
</b:if>
  • Dan Letakan di Bawah kode Seperti post-body entry-content
    untuk contoh penempatan kode milik saya seperti ini

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>





<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ads-atas'>
<amp-fx-flying-carpet height='250px'>
<amp-ad data-ad-client='ca-pub-281965xxxxxxxxxx' data-ad-slot='221076xxxx' height='600' layout='fixed-height' type='adsense'> 
 </amp-ad>
</amp-fx-flying-carpet>
  </div>
</b:if>
  • Silahkan ganti data-ad-client='ca-pub-281965xxxxxxxxxx' data-ad-slot='221076xxxx dengan kode adsense yang anda miliki.
  • Berhubung untuk unit iklan parallax ini menggunakan tinggi 600 x 300 silahkan gunakan unit iklan responsif atau anda buat unit iklan lagi dengan iklan berukuran 600 x 300. meski iklan ini mempenyai tinggi 600px tapi iklan ini akan tampil dengan jendala 250px dari kode parallax yang kita pasang. maka dari itu iklan akan terlihat diam melayang saat mouse di scrool kebawah.

mungkin hanya itu yang bisa saya bagikan untuk artikel Cara Mudah Membuat Iklan Adsense Scrool Parallax Dibawah Judul Valid AMP semoga bermanfaat.

Leave a Comment