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 == "item"'>
<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:
Baca: Cara Lengkap Pasang AdSense di Blog AMP