Cara Memasang Floating Ads di Bagian Bawah Halaman Blog

GEMA.MY.ID

Tuesday, April 6, 2021

Cara Memasang Floating Ads di Bagian Bawah Halaman Blog

Floating Ads di Blog - Salah satu media pemasaran yang paling banyak digunakan untuk mempromosikan produk dan jasa adalah internet. Ditambah lagi dengan berbagai survei yang telah dilakukan, pengguna internet diperkirakan semakin meningkat dari tahun ke tahun.

Tingginya angka penggunaan tersebut tentu juga memberikan dampak positif bagi para advertiser dan publisher. Konten kreator dapat dengan mudah menghasilkan uang dari setiap karya yang dibagikannya, entah itu tulisan maupun video.

Sementara bagi pelaku usaha, tingginya penggunaan internet bisa menjadi ladang menggiurkan guna menjangkau calon pelanggan yang lebih banyak.

Nah salah satu tempat yang paling sering menampilkan iklan produk dan jasa adalah halaman blog. Ya, blog memang menjadi media yang cukup meyakinkan bagi para pengiklan mempromosikan produknya.

Kembali ke sudut pandang sebagai blogger, iklan tentu sudah menjadi hal yang sangat penting untuk diperhatikan. Bagaimana tidak, ada beberapa trik khusus yang sering dilakukan untuk mengoptimalkan penghasilan. Salah satunya adalah jenis dan penempatan iklan.

Rekomendasi: Cara Memblokir Iklan di Google Chrome

Apa itu Floating Ads?

Floating ads adalah jenis iklan yang tampil secara tetap (melayang) pada posisi yang telah ditentukan. Walaupun pengunjung menggeser halaman sampai bagian paling bawah, iklan tersebut akan tetap di tempatnya tanpa mengikuti alur geseran.

Penempatannya sendiri bisa disesuaikan dengan keinginan sendiri. Namun khusus untuk kali ini, kita hanya akan mengatur pada bagian bawah halaman seperti yang diterapkan oleh situs-situs besar seperti Detik.com dan Kompas.com.

Mungkin akan muncul pertanyaan, apakah floating ads tidak melanggar kebijakan AdSense? Untuk masalah tersebut, Google telah memberikan penjelasan bahwa, selama tampilan iklan tidak lebih dari sepertiga halaman, maka boleh-boleh saja.

Itulah alasan mengapa ukuran iklan yang digunakan selalu kecil. Bukan hanya masalah kebijakan, tapi pembaca juga sering merasa terganggu dengan elemen-elemen yang hampir menutupi halaman.

Saatnya ke pembahasan utama. Let's begin.

Cara Memasang Floating Ads di Blog

Langkah 1

Masuk ke GOOGLE ADSENSE
Pilih menu IKLAN

Sumber: Google AdSense

Pilih MENURUT UNIT IKLAN > IKLAN DISPLAY

Sumber: Google AdSense

Pada bagian UKURAN IKLAN, pilih TETAP
Atur dengan ukuran 728x90 > BUAT

Sumber: Google AdSense

Salin kode yang didapatkan ke Notepad.

Anda juga bisa menggunakan media periklanan lainnya (misal program afiliasi) untuk membuat unit iklan. Namun pastikan ukuran tetap 728x90 pixel.

Langkah 2

Masuk ke BLOGGER
Pilih menu TATA LETAK
Buat gadget baru dengan jenis HTML / JAVASCRIPT

Sumber: Blogger

Tempel ke kolom yang disediakan:

<b:if cond="data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery">
  <div class="sticky-ad" id="sticky-ad">
    <div class="sticky-ad-content">
      Kode iklan di sini
    </div>
    <button aria-label="Close this ad" class="sticky-ad-close-button" onclick="document.getElementById('sticky-ad').style.display='none'"/>
  </div>
  <script>function stickyAd(){var e=document.getElementById("sticky-ad");300<window.pageYOffset&&(e.style.display="block",window.removeEventListener("scroll",stickyAd))}window.addEventListener("scroll",stickyAd);</script>
</b:if>

Masukkan kode iklan ke bagian yang telah ditandai
Setelah itu, pilih menu TEMA
Pilih EDIT HTML
Tempel di atas ]]></b:skin>:

.sticky-ad{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:visible;position:fixed;text-align:center;bottom:0;left:50%;width:728px;z-index:995;max-height:90px;background-image:none;background-color:rgba(255,255,255,.7);margin-bottom:0;padding-top:4px;display:none;margin-left:-368px}
.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:-28px;right:0;background-image:url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-size:13px 13px;background-position:center;background-color:rgba(255,255,255,.7);background-repeat:no-repeat;border-radius:12px 12px 0 0;cursor:pointer}

Agar tidak tampil di perangkat seluler, silahkan menambah kondisional cond="data:blog.isMobileRequest == 'false'" pada bagian gadget yang telah dibuat:

<b:widget cond="data:blog.isMobileRequest == 'false'" id="HTML1" locked="false" title="Floating Ads" type="HTML" visible="true">

Pilih SIMPAN
Selesai.

Demo

Penutup

Iklan melayang di bagian bawah halaman telah berhasil dibuat. Agar lebih aman, silahkan membuka Panduan Kebijakan Google AdSense untuk mendapatkan infomasi penting lainnya mengenai penayangan iklan.

Jika ada pertanyaan atau sanggahan terkait pembahasan kali ini, silahkan menghubungi penulis melalui kontak.

Rekomendasi:

Cukup sekian artikel tentang Cara Memasang Floating Ads di Bagian Bawah Halaman Blog ini, semoga bermanfaat dan menjadi berkah bagi kita semua.

Referensi:
www.maringngerrang.com / tinyurl.com/7vr5dh7v

Cancel