Cara Pasang Iklan Parallax AdSense di Blogger

Cara Pasang amp-fx-flying-carpet Pada Blog Blogspot

Baru-baru ini, AMP Project dan AdSense mengeluarkan sebuah terobosan baru tentang unit iklan baru dan ekstensi baru untuk AMP. Yap! adalah amp-fx-flying-carpet. 

EKstensi terbaru dari AMP ini memungkinkan anda membuat iklan parralax yang bisa anda pasang di website anda, termasuk blog berbasis wordpress. 

Caranya cukup mudah kok, anda cukup membuat div baru untuk penempatan iklan, dan kemudian memasang iklan vertical ads dengan minimal ukuran 300X600. Ingin tahu caranya? Yuk ikuti caranya di sini:

1. Pasang code untuk amp-fx-flying-carpet di bawah ini, tempatkan di sebelum kode </head>:

<script async='async' custom-element='amp-fx-flying-carpet' src='https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js'></script>

2. Sekarang, anda harus memasang CSS ini untuk penempatan iklan  parallax anda. Copy dan pastekan code di bawah ini, sebelum code </amp-custom>

 .abovead {     padding-top: 0px;     width:300px;     margin: 0 5px 5px 0px;     display: inline;    position: inline;    top: 500;     float: left;    background:      /* On "top" */     repeating-linear-gradient(      45deg,      transparent,      transparent 10px,      #ccc 10px,      #ccc 20px     ),     /* on "bottom" */     linear-gradient(      to bottom,      #eee,      #999     );         background-repeat:no-repeat;         background-size:cover;         background-attachment: fixed;    }    .abovead:hover span {          visibility:visible;         top:0; left:250px;          z-index:1;     }    @media screen and (max-width:414px) {     .abovead {      padding-top: 5px;      width: 100%;      height: auto;      margin: 0 0 5px;      display: block;      float: none     }    }    .amp-flying-carpet-text-border {    background-color: white;    color: black;    text-align: center;    border-style: solid;    }   

3. Agar iklan tampil di bawah judul, copy  code berikut ini, pastekan di bawah code <div class='post-body entry-content' :

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='above_post'> <amp-fx-flying-carpet height='250px'> <amp-ad data-ad-client='xxxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' height='600' layout='fixed' type='adsense' width='300'>  </amp-ad> </amp-fx-flying-carpet>   </div> </b:if>

* Ganti XXXX dengan publisher Adsense Anda, dan YYYY dengan code unit iklan adsense 300X600 yang telah anda buat.

5. Kemudian klik SAVE tema. Contoh hasilnya adalah seperti di bawah ini:


Atau silahkan lihat iklan di atas (dibawah judul artikel ini).
Baca: Cara Lengkap Pasang AdSense di Blog AMP

Bagikan Artikel ini