✓ Cara Membuat Iklan Parallax Valid AMP di Blogger
Cara Mudah Membuat Iklan Parallax Valid AMP di Blogger
Selamat datang di Repick.Net, di pertemuan kali ini kita akan membahas hal yang cukup menarik, tentunya berhubungan dengan AMP. Seperti yang anda tahu sebelumnya, blog ini terkhususkan untuk belajar tutorial AMP dari A sampai Z.
Pada postingan sebelumnya saya sudah membuat tutorial cara memasang iklan MGID valid AMP di blogger, yang saya rasa menarik juga untuk anda baca.
Ya jika sudah membaca artikel di atas mari kita lanjut, disini kita akan membahas cara membuat iklan parallax valid AMP. namun sebelum masuk ke pembahasan, ada baiknya kita berkenalan dulu dengan jenis iklan yang satu ini.
Iklan Parallax adalah salah satu jenis iklan yang unik, dimana Objek yang berada di latar belakang (Iklan) bergerak dengan sangat lambat dibanding objek yang ada di atas (Artikel). Sehingga kesannya iklan tersebut melayang di belakang Artikel.
Terus, apa sih keuntungan memasang iklan parallax? Untuk keuntungannya saya rasa dapat meningkatkan jumlah klik iklan, karena letaknya sangat strategis berada di belakang artikel. Untuk bahaya atau tidaknya memasang iklan jenis ini, saya jamin 100% tidak ada bahayanya.
Jika kalian ingin melihat contoh iklan ini, anda bisa melihatnya di blog Igniel.com pada versi mobile, nanti akan terlihat iklannya berada di belakang artikel. Oke langsung saja kita masuk ke tutorial.
Cara Memasang / Membuat Iklan Parallax Valid AMP
1. Pertama silahkan login ke dashboard bloger kalian
2. Kemudian pilih Tema, lalu pilih Edit HTML
3. Letakkan kode dibawah ini tepat di atas </head>
<script async="async" custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>4. Jika sudah meletakkan kode di atas, sekarang silahkan cari kode <div class='post-body entry-content' ...> , tanda titik tiga menanda kan kelanjutan dari kode tersebut.
5. Kalau sudah ketemu, silahkan anda letakkan kode di bawah ini tepat di atas kode <div class='post-body entry-content' ...> tadi.
<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>6. Jangan lupa ganti kode ad client dan ad slot dengan kode iklan kalian, saya sarankan bikin kode iklan ukuran 300x600 px.
7. Terakhir letakkan kode di berikut ini tepat di bawah <style amp-custom='amp-custom'>
.above_post {
padding-top: 8px;
width: 300px;
margin: 0 20px 5px 0;
display: inline;
float: left
}
@media screen and (max-width:414px) {
.above_post {
padding-top: 10px;
width: 100%;
height: auto;
margin: 0 0 10px;
display: block;
float: none
}Tambahan
Jika blog kamu menggunakan menu sticky header silahkan tambah kode CSS di bawah ini agar iklan tidak terpotong dengan sticky header anda.
.above_post amp-ad {
margin-top: 60px
}Anda bisa menyesuaikan tinggi menu sticky dengan mengganti 60px di atas.
Silahkan anda simpan tema, dan lihat hasilnya.
NOTE
Oh iya, perhatian sekarang setiap mengedit template AMP anda harus mengganti kode di bawah ini
<html b:css='false' b:js='false' expr:dir='data:blog.languageDirection' lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>dengan kode
<html b:css='false' b:js='false' expr:dir='data:blog.languageDirection' lang='id'>Oke, semoga artikel cara membuat iklan parallax valid AMP ini bermanfaat untuk kalian.
www.repick.net
Komentar
Posting Komentar