Cara Pasang Iklan Parallax Di Template AMP dan NON AMP



Penempatan iklan menjadi salah satu hal penting dalam sebuah blog. Bukan hanya kenyamanan pengunjung saja tapi juga bisa meningkatkan pendapatan, contohnya iklan Parallax Scrolling.

Tapi apakah kamu tahu apa itu iklan Parallax Scrolling? Dan apa manfaat iklan Parallax Scrolling? Simak penjelasannya berikut.

Apa Itu Iklan Parallax Scrolling?

Iklan Parallax Scrolling adalah iklan yang menetap dalam tempatnya. Walau pun kita scroll artikel kebawah tapi iklan tersebut akan tetap berada sesuai dengan posisi yang telah kita tetapkan.

Iklan ini juga sudah banyak digunakan oleh situs-situs besar di indonesia. Bahkan sampai sekarang pun mereka masih menggunakan jenis iklan tersebut.

Kalau dilihat dari aman atau tidaknya saya belum tahu tentang itu karena situs-situs besar yang telah lama memasang iklan itu sekarang masih baik-baik saja.

Apa Manfaat Iklan Parallax Scrolling?

Manfaat memasang iklan Parallax Scrolling adalah kita bisa mendapatkan penghasilan yang jauh lebih besar karena iklan ini mampu menarik perhatian para pengunjung sehingga jumlah klik iklan akan meningkat tajam.

Tentunya hal itu akan sangat menguntungkan pendapatan kita yang selama ini masih belum stabil.

Nah, kamu pasti tertarik ingin mencobanya kan? Dibawah ini adalah cara pasang iklan Parallax Scrolling di template AMP dan NON AMP blogger.

Cara Pasang Iklan Parallax Scrolling Di Template AMP

1. Masuk ke dashboard blogger > Edit HTML.

2. Salin kode dibawah ini dan letakan 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>


3. Letakan kode dibawah ini diatas kode <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>


4. Kemudian tambahkan juga kode CSS dibawah ini


.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 } }


5. Simpan template.

Silahkan ganti client dan data-ad-slot seperti pada nomor 2 diatas dengan milik kamu.

Cara Pasang Iklan Parallax Scrolling Di Template NON AMP

1. Masuk dashboard blogger > Edit HTML.

2. Salin kode dibawah ini dan letakan sebelum kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /*<![CDATA[*/ .paralax_div { position: relative; overflow: visible; width: 300px; height: 250px; margin-right: 20px; display: inline-block; float: left; z-index: 9999; } .paralax_div > div { overflow: hidden; width: 100%; height: 100%; margin: 0; position: absolute; top: 0; left: 0; clip: rect(auto auto auto auto); } .paralax_div > div > div { width: 100%; height: 100%; position: fixed; top: 0; margin: 0 auto; -moz-transform: translateZ(0); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .paralax_div > div > div > div { width: 100%; height: 100vh; position: absolute; left: 50%; top: 0; border: none; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-content: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: #ddd; } .paralax_div > div > div > div > * { margin: 0; margin-top: 0; } .paralax_div > div > div > div > a { width: 100%; height: 100vh; } .paralax_div img,.paralax_div iframe,.paralax_div ins { height: 600px; width: 300px; } .clear { clear: both; display: block } @media screen and (max-width:640px) { .paralax_div { width: 100%; height: 250px; margin: 0 auto; float: none; } .paralax_div > div > div > div { left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .paralax_div > div > div { width: 100%; left:0; text-align: center; } .paralax_div img { margin: 0 auto; width:auto; max-width:100%; height:auto; } } @media screen and (max-width:320px) { .paralax_div iframe,.parallax_banner ins { margin: 0 auto; width:100%; height:600px; } } /*]]>*/ </style> </b:if>


3. Salin juga kode dibawah ini dan letakan diatas kode <div class='post-body entry-content'


<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class="paralax_div"> <div> <div> <div> <img src="https://4.bp.blogspot.com/-JpV04y4MQwM/WTITSODPw-I/AAAAAAAArd4/KKuyWD3QGuADLhqSj2Oif781jK4xrnNjQCLcB/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" /> </div> </div> </div> <span class="clear"/> </div> </b:if>


Kamu juga bisa meletakan kode diatas melalui Tata Letak blogger.

CATATAN
Ada beberapa kode <div class='post-body entry-content' dalam template. Silahkan untuk mencoba meletakan diatasnya satu persatu. Kalau tidak bisa, letakan diatas kode berikutnya yang sama.

Kemudian kalau kamu ingin pasang iklan banner dengan ukuran tinggi 600px dan lebar 300px maka kamu hanya mengganti url gambar pada tag <img>.

Kalau kamu ingin memasang iklan dengan iframe atau iklan Adsense yang berukuran 300x600 maka kamu bisa mengganti tag <img> dengan kode iklan Adsense milik kamu.

Nah, itulah cara pasang kode iklan Parallax Scrolling di template AMP dan NON AMP blogger. Semoga bermanfaat dan selamat mencoba.

Artikel Terkait

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Copyright © 2019 - 2020 NgotakDikitNesia All Rights Reserved.