Cara Membuat Iklan Parallax Untuk Blog AMP

Cara Membuat Iklan Parallax Khusus Untuk Blog AMP

Pernah dengar yang namanya iklan parallax? Kalau belum akan Saya kasih ngerti Anda tentang apa itu iklan parallax.

Anda pernah lihat sebuah halaman web yang ketika Anda scroll ada iklan yang tidak bergerak mengikuti gerakan halaman tersebut?

Keren bukan?

Pada tampilan halaman situs yang disisipkan iklan jenis ini,akan terlihat ada ruang atau kolom yang memang disediakan khusus untuk menampilkan iklan dari Google AdSense atau iklan lainnya.

Pada saat Anda membuka sebuah halaman,iklan tidak akan turut bergerak meski halaman situs Anda geser ke bawah atau ke atas.

Nah, karena ada blogger yang meminta khusus melalui kontak WA Saya, maka kali ini akan Saya bagikan tutorial untuk membuat iklan Parallax tersebut.

Akan tetapi, tutorial ini khusus bagi Blog AMP atau Accelerated Mobile Page, sesuai permintaan.

Oh ya, sebelumnya, Saya ucapkan Terima kasih kepada Anda yang menghubungi Saya via WA.

karena Anda, Saya dapat inspirasi untuk update postingan di Blog ini.

Cara Membuat Iklan Parallax Untuk Blog AMP

Oke, sekarang Kita lanjut tutorial cara membuat iklan parallax untuk Blog AMP yang memakai CMS Blogspot.

Jadi, jika Anda pengguna Wordpress atau lainnya, mohon lewati dulu artikel ini.

Login ke akun Blogger Anda
Langkah pertama yang harus Anda lakukan adalah login ke blogspot, jangan ke CMS lain.

Kalau Anda maksa login ke CMS lain, ya jelas nyasar. 😃

Karena tutorial ini untuk blog yang sudah memakai AMP HTML, maka Anda pun harus memilih Blog yang sudah Valid Amp.

Belum punya blog Amp? Lalu Anda ingin membuatnya sekarang, maka baca tutorial cara membuat Blog Valid AMP.
Pilih Tema atau Template
Setelah Anda sudah login, pilih tema pada menu sidebar kiri.

Kemudian lanjutkan dengan edit HTML.
Maka Anda akan diperlihatkan deretan kode penyusun templat Blog yang bikin puyeng bagi pemula.hehehe...

Lihat gambar.
Gunakan Script amp-fx-flying-carpet

Selanjutnya, gunakan script amp-fx untuk menjalankan tampilan iklan ini.

Anda cari kode </head>.
Kemudian letakkan script amp-flying-carpet berikut tepat di atasnya.

<script async='async' custom-element='amp-fx-flying-carpet' src='https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js'/>
Pelajari selengkapnya tentang script tersebut disini
Gunakan CSS untuk mengatur tampilannya.

Cari kode </b:skin>, dan tempelkan kode CSS berikut di atasnya.

.iklan_parallax{display:inline-block;width:auto;height:auto;margin:0 15px 15px 0;float:left}.
.iklan_parallax span{font-size:12px;font-weight:400;color:#9099b7;text-align:center;margin:0 auto 5px;display:block}
Langkah terakhir copy dan paste kode berikut di atas kode <data:post.body/>

<div class='iklan_parallax'><amp-fx-flying-carpet height='400px'><span>Advertisement</span>

Letakkan kode iklan Anda disini. Bisa iklan AdSense atau iklan lainnya.

</amp-fx-flying-carpet></div>

Untuk mengatur tinggi kolom,bisa meng-edit height='400px' untuk disesuaikan dengan iklan yang Anda pasang.

Apakah sampai disini sudah selesai? Jawabannya bisa YA, bisa juga TIDAK.

Karena biasanya kode <data:post.body/> dalam sebuah templat itu lebih dari satu. Oleh sebab itu, pilih yang kedua atau ketiga.

Atau Anda pilih kode <data:post.body/> yang terbungkus dengan tag kondisional ini,

<b:if cond='data:blog.pageType == "item"'>

Bla...

Bla...

Bla...

<data:post.body/>

Bla...

Bla...

Bla...

</b:if>

Kode kondisional di atas berfungsi untuk menampilkan elemen blog pada halaman postingan saja. Sehingga tidak akan tampil di halaman lainnya.

Memang, kebanyakan situs-situs besar hanya menampilkan kode parallax pada halaman postingan.

Selain itu, Anda juga harus tahu bahwa iklan ini hanya akan tampak jika di akses melalui smartphone, tidak akan tampak pada tampilan dekstop.

Jika Proses di atas sudah Anda lakukan hingga selesai,dan tidak ada kesalahan saat preview, maka silahkan klik simpan.

Nah, itu dia cara membuat iklan parallax untuk blog AMP yang bisa Saya tuliskan. Cukup mudah bukan?.
Kalau mendapatkan kendala, jangan sungkan untuk bertanya via kolom komentar dibawah.