Buka Tabungan Neo Bank & Dapatkan Hadiah Tunai 10Jt, Bisa Langsung Ambil!
Tanpa Syarat & Aman

Ambil

Cara Membuat Iklan Parallax Adsense di Blogger

Iklan Parallax adalah salah satu iklan paling relevan yang bagus untuk meningkatkan penghasilan.Iklan ini berada diantara 2 paragraf (posisinya fixed)
Gambar 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. Salah satu blog yang menggunakan iklan jenis parallax ini adalah blog igniel.com.

Bahkan selain digunakan oleh para blogger, jenis iklan parallax juga digunakan di beberapa situs besar lho. Contohnya seperti situs media kompas dan detik. Gak heran sih kenapa iklan jenis parallax ini banyak digunakan di berbagai blog. Pasalnya, iklan parallax ini kemungkinan besar (90%) user atau pengunjung blog pasti akan melihat iklan parallax ini.

Apa Sih Yang di Maksud Dengan Iklan Parallax?

Parallax atau bisa disebut dengan paralaks 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. Paham? 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 berikut.

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 ThemeEdit HTML.
  4. Kemudian tambahkan CSS dibawah ini sebelum kode ]]></b:skin> atau </style>.
    .paralax_div{position:relative;overflow:visible;width:300px;height:250px;margin-right:20px;display:inline-block;float:left;z-index:99}.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}.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}}
    
  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:blog.pageType == &quot;item&quot;">
    <div class="paralax_div">
      <div>
        <div>
          <div>
           <!-- Taruh kode iklan kamu disini -->
           </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.

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.

Everything you see in this world is just a deceptive decoration.

Post a Comment

Tulislah komentar unik, jelas dan tidak mengandung LINK AKTIF atau PROMOSI.