Cara Buat Iklan Melayang (Floating Ads) Di Kanan Kiri Blog

Ada banyak trik meningkatkan penghasilan iklan adsense, salah satunya adalah menempatkan posisi unit iklan adsense pada bagian yang strategis dilihat pengunjung.

Posisi iklan adsense floating atau melayang disamping kanan dan kiri blog dianggap strategis karena berpotensial untuk menarik klik iklan, selain itu tidak mengganggu pengguna ketika sedang membaca sebuah konten.

Lalu bagaimana cara menerapkan posisi iklan adsense melayang disamping kanan dan kiri blog? Caranya cukup mudah, kamu bisa mengikut tutorial berikut.

Menerapkan Iklan Melayang (Floating Ads) Disamping Kanan Kiri Blog

1. Masuk ke Dasbhoard Blogger kalian

2. Masuk ke Tema > klik ikon drop down tepat di samping tombol 'Sesuaikan' lalu Klik Edit HTML

3. Cari </style> atau ]]></b:skin> dan simpan CSS berikut diatasnya

   /* Floating Ads (Left and Right) */
   [data-i=xmark]:before{content:'';width:15px;height:15px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
   .ads-floating-content{position:relative;width:150px;height:auto}
   .ads-floating-left,.ads-floating-right{position:fixed;top:50%;transform:translateY(-50%);z-index:999}
   .ads-floating-content img{width:100%;height:auto}
   .ads-floating-left{left:calc(50% - 675px)}
   .ads-floating-right{right:calc(50% - 675px)}
   .ads-floating-close-left,.ads-floating-close-right{position:absolute;top:1px;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;background-color:#fff}
   .ads-floating-close-left{right:1px}
   .ads-floating-close-right{left:1px}

4. Lanjut cari </body> dan simpan Javascript berikut diatasnya

   <!-- floating ads left -->
   <div class="ads-floating-left">
     <div class="ads-floating-content ads-floating-it">
       <a href="" target="_blank">
         <img src="https://blogger.googleusercontent.com/img/b/.../s900-rw-l80-e30/ads_160x600.png" alt="advertisement"/>
       </a>
       <span class="ads-floating-close-left close-ads-floating-it" data-i="xmark">
       </span>
     </div>
   </div>
   <!-- floating ads right -->
   <div class="ads-floating-right ads-floating-it">
     <div class="ads-floating-content">
       <a href="" target="_blank">
         <img src="https://blogger.googleusercontent.com/img/b/.../s900-rw-l80-e30/ads_160x600.png" alt="advertisement"/>
       </a>
       <span class="ads-floating-close-right close-ads-floating-it" data-i="xmark">
       </span>
     </div>
   </div>

5. Terakhir tambahkan Javascript berikut tepat sebelum </body> atau tepat di bawah kode html diatas.

   <script type='text/javascript'>/*<![CDATA[*
   /* Floating Ads (Left and Right) */
   document.addEventListener("DOMContentLoaded",function(){let e=!1;document.querySelectorAll(".close-ads-floating-it").forEach(t=>{t.addEventListener("click",function(){e=!0;document.querySelectorAll(".ads-floating-it").forEach(e=>{e.style.display="none"})})})});
   /*]]>*/</script>

6. Jika sudah selesai kemudian Klik 'Simpan'

Selain digunakan untuk menampilkan iklan AdSense. Script tersebut juga bisa digunakan juga untuk banner iklan mandiri atau untuk banner afiliasi.

Demo Iklan Adsense Melayang

Jenis iklan melayang atau Floating Ads di samping kanan dan kiri blog cocok di terapkan pada blog yang memiliki tampilan minimalis.

Tapi jika blog kamu memiliki tampilan wide atau full hingga samping tentu tidak di rekomendasikan karena bisa menghalangi pembaca.

Sembunyikan Floating Ads Saat Scroll Mencapai Footer

Untuk menyembunyikan floating ads ketika saat scrol mencapai footer, kalian bisa mengikuti tutorial di artikel berikut Fade In dan Fade Out Floating Ads.

Penutup

Nah itu tadi Cara Buat Iklan Melayang (Floating Ads) Disamping Kanan Kiri Blog. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan, jika ada pertanyaan lain bisa bertanya melalui komentar.