Cara Membuat Iklan Parallax Adsense di Blogger

Cara Membuat Iklan Parallax AdSense (Fixed Position When Scrolling) di Blogger - Salah satu cara agar penghasilan kita melalui AdSense meningkat adalah dengan memerhatikan dan menempatkan unit iklan AdSense yang paling efektif dan relevan di blog. Jangan sampai gara-gara penempatan unit iklan yang tidak relevan menjadi sebab turunnya penghasilan kamu.

Ada banyak cara dan tips tempat yang bagus untuk menempatkan iklan AdSense di blog agar penghasilan meningkat. Salah satu penempatan iklan yang relevan dan efektif di blog adalah iklan jenis parallax.

Iklan jenis parallax ini sudah banyak digunakan oleh para blogger. Untuk melihat hasil atau demo dari iklan parallax AdSense ini, kamu bisa lihat langsung di halaman atau blog ini. Blog ini juga sudah saya pasang iklan parallax karena menurut saya iklan parallax ini sangat unik dan menarik banyak klik dari para pengunjung.

Bahkan selain digunakan oleh para blogger, jenis iklan parallax juga banyak digunakan di beberapa situs besar lho. Contohnya seperti situs media Kompas dan Detikcom.

Gak heran sih kenapa iklan jenis parallax ini banyak digunakan di berbagai blog dan situs-situs media besar. Hal ini karena iklan parallax ini kemungkinan besar (90%) user atau pengunjung blog pasti akan melihat iklan parallax ini. Dan kemungkinan besar banyak pengunjung yang tertarik dengan letak dan posisi iklan ini untuk mengkliknya.

Apa Sih Yang di Maksud Dengan Iklan Parallax?

Parallax atau bisa di sebut dengan parallax scrolling web design adalah suatu tehnik khusus dimana sebuah objek yang berada di latar belakang (background) bergerak atau berjalan lebih lambat dari pada pergerakan yang berada di latar depan atau objek utama. Sehingga parallax ini tidak terlihat bergerak sama sekali saat user melakukan scrolling pada halaman web tersebut.

Iklan parallax ini akan muncul di bagian tengah diantara dua paragraf artikel (sebagai background). Dan iklan parallax ini akan tetap terlihat atau tidak bergerak walaupun user melalukan scrolling. Sampai sini paham, kan?

Kalau masih belum tergambarkan apa yang di maksud dengan iklan parallax, kamu bisa lihat demonya di Codepen nanti atau kalau mau lihat di halaman posting langsung bisa cek di halaman atau blog ini.

Demo Iklan Parallax   

Apakah Iklan Parallax Ini Aman?

Tentu saja aman. Walaupun jenis iklan ini tidak disediakan langsung oleh pihak Adsense, namun bukan berarti jenis iklan ini tidak boleh kita buat dan kita gunakan di blog.

Sudah banyak kok blog dan website besar yang menggunakan iklan jenis parallax ini dan sudah terbukti aman. Jadi kamu tidak perlu cemas sama iklan dengan jenis parallax ini.

Di artikel kali ini kita akan mencoba membuat iklan jenis parallax ini di blog Blogger. Berikut tutorial cara membuat dan menggunakan iklan parallax di tengah postingan blog Blogger.

Cara Membuat Iklan Parallax di Tengah Postingan Blog

1. Login dan ambil kode iklan Adsense kamu terlebih dahulu. Saran saya buat atau gunakan unit iklan dengan gaya vertikal (memanjang ke bawah). Tujuannya agar unit iklan yang digunakan sesuai dengan ukuran lebar dan panjangnya.
2. Setelah menyimpan kode unit iklan, login ke akun blogger kamu.
3. Masuk ke menu Theme ➤ Edit HTML.
4. Kemudian tambahkan CSS dibawah ini sebelum kode ]]></b:skin> atau </style>.

   /* CSS Parallax AdSense by BokBan */
   .prL-bk{position:relative;overflow:visible;width:300px;height:250px;margin-right:20px;display:inline-block;float:left;z-index:99}
   .prL-bk > div{overflow:hidden;width:100%;height:100%;margin:0;position:absolute;top:0;left:0;clip:rect(auto auto auto auto)}
   .prL-bk > 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)}
   .prL-bk > 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}
   .prL-bk > div > div > div > *{margin:0;margin-top:0}.
   .prL-bk > div > div > div > a{width:100%;height:100vh}
   .prL-bk img,.prL-bk iframe,
   .prL-bk ins{height:600px;width:300px}
   .clear{clear:both;display:block}@media screen and (max-width:640px){.prL-bk{width:100%;height:250px;margin:0 auto;float:none}
   .prL-bk > div > div > div{left:50%;-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}
   .prL-bk > div > div{width:100%;left:0;text-align:center}
   .prL-bk img{margin:0 auto;width:auto;max-width:100%;height:auto}}@media screen and (max-width:320px){.prL-bk iframe,
   .prLbn-bk ins{margin:0 auto;width:100%;height:600px}}
   

5. Lalu cari kode <data:post.body/>. Jika ada banyak kode yang seperti itu, pastikan memilih yang berada dalam tag kondisional halaman post.
   Kalau di template blog kamu tidak ada kode tersebut, coba deh cari kode yang satu ini :

   <div class='post-body entry-content'

6. Tambahkan kode HTML ini tepat dibawah kode <data:post.body/> atau <div class='post-body entry-content' tadi.

   <b:if cond="data:view.isPost">
   <div class="prL-bk">
     <div>
       <div>
         <div>
          <!-- [ Taruh kode iklan AdSense kamu disini ] -->
          <!-- [ <script>...</script> ] -->
          </div>
        </div>
      </div>
   <span class="clear"></span>
   </div>
   </b:if>

   Ganti tulisan yang di mark dengan kode unit iklan yang sudah kamu buat dan kamu simpan di langkah pertama tadi.
7. Jangan lupa klik simpan dan lihat hasilnya.

View On Codepen   

Nah, itu dia tutorial cara membuat iklan jenis parallax Adsense (fixed position when scroll) ini di blogger. Semoga artikel ini bisa bermanfaat dan membantu bagi yang membutuhkan. Kalau masih bingung, tanyakan di kolom komentar.

Cindy NOTHING!!!

Share :