Kode iklan melayang yang akan saya bagikan ini hanya tampil di versi desktop blog saja. Jika kamu hanya butuh membuat Floating Ads atau iklan sticky hanya di destop saja silahkan teruskan membaca artikel 'Cara Buat Iklan Melayang Di Blog' ini.
Penghasilan yang diterima blogger umumnya berasal dari iklan yang tayang di blog tesebut. Iklan yang cukup terkenal yaitu Google Adsense, Media Net, Infolink, dan lain-lain.
Umumnya penyedia iklan tersebut memayar penayang atau publisher nya berdasarkan jumlah klik iklan yang didapat.
Salah satu upaya untuk meningkatkan rasio klik iklan adalah dengan membuat iklan tersebut melayang.
Panduan Cara Buat Iklan Melayang Di Blog Armaila kutip dari postingan yang ada di blog kacateknologi.com yang berjudul 'Cara Membuat Iklan Sticky Blogger di Tengah untuk Mobile dan Desktop'.
Tetapi untuk panduan yang Armaila share ulang disini hanyalah pada script yang membuat iklan melayang untuk tampilan desktop saja. Hal tersebut karena pada saat ini floating ads versi mobil sudah ada bawaan langsung dari google.
![Cara Buat Iklan Melayang Di Blog [Floating Ads] Versi Desktop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOM0M6F_YULAbuMyBftz0hFnvJTxm-5uqWxb1h8xLX8YCg4Iw_01zzjVPdryqTs69LyZ3zPygrzj2_6LlcsD-NVuBbz8ZpOOEkLkAOxgnpnb_hkoTJL1kRGYE5KE4OMSixDTFAJLTVh9ZmYMYPkqhVVPFH9mC405EZ8-4f_QI_mLHQzUZW_Kqsw1cWkw/s1366/Cara%20Buat%20Iklan%20Melayang%20Di%20Blog%20%5BFloating%20Ads%5D%20Versi%20Desktop.png "Cara Buat Iklan Melayang Di Blog [Floating Ads] Versi Desktop")
Penting! Sebelum Membuat Iklan Melayang Di Blog
- Pastikan bahwa iklan terlihat seperti iklan, tidak dimanipulasi atau diedit sedemikian rupa sehingga menyebabkan accidentall click.
- Jangan sampai iklan sticky menutupi konten atau menutupi iklan sticky lainnya. Disarankan untuk menggunakan satu iklan sticky saja pada blog.
- Pastikan Anda juga memperhatikan apakah template blog Anda cocok dipasang iklan sticky atau tidak.
- Iklan sticky hanya boleh dipasang di tepi layar saja.
Cara Membuat Iklan Sticky di Bawah Layar Blog Untuk Desktop
Berikut adalah cara memasang iklan sticky untuk desktop:
Masuk ke dasbor Blogger Anda.
Pilih Tema dan Edit HTML.
Setelah masuk ke code editor, Anda tekan CTRL + F kemudian ketikkan cari kode </body>.
Silakan masukkan kode berikut tepat di atas kode </body> tadi.
<!-- Sticky Desktop Bawah Responsif -->
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "false" and not data:blog.searchQuery'><style>/*<![CDATA[mankoin.com*/.sticky-ad{display:none;-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:sticky;text-align:center;left:0;width:100%;z-index:999;max-height:100px;background-image:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.2);margin-bottom:0;padding-top:4px;transition:all .4s ease-in-out;max-width:100%;height:100px;bottom:0;-webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both}@-webkit-keyframes fade-in{0%{bottom:-100px}100%{bottom:0}}@keyframes fade-in{0%{bottom:-100px}100%{bottom:0}}.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:-28px;right:0;background-size:24px 24px;background-position:2px;background-color:#fff;background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:0;border-radius:12px 0 0 0;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000′ d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E");padding:0}/*]]>*/</style><div class='sticky-ad' id='sticky-ad'><ins class='adsbygoogle' data-ad-client='data-ad-client' data-ad-slot='data-ad-slot' style='display:inline-block;width:970px;height:90px'/><script>(adsbygoogle = window.adsbygoogle || []).push({});</script><button aria-label='Close this ad' class='sticky-ad-close-button' onclick='this.parentElement.style.position='relative';this.style.display='none';'/></div><script>//<![CDATA[
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>
<!-- Sticky Desktop Bawah Responsif -->
Ketika kode sudah dimasukkan, jangan dulu disimpan! Silakan Anda ganti tulisan berwarna kuning di atas sesuai dengan petunjuk. ID Google AdSense biasanya diawali dengan tulisan ca-pubxxxx adapun untuk ID unit iklan adalah kode slot iklan yang ingin Anda pasang.
Jika sudah benar silakan Anda simpan template-nya dan lihat apakah hasilnya bekerja.
Catatan: Anda bisa menggunakan unit iklan responsif agar iklan dapat menyesuaikan bentuknya. Namun, apabila Anda ingin iklan tetap silakan atur lebarnya menjadi 728 dan tinggi menjadi 90 (728×90).
Template Yan Diterapkan Script Iklan Melayang [Floating Ads]
Script tersebut diatas telah Armaila coba terapkan di bebeerapa template yang Armaila gunakan antara lain:
Dan semua template tersebut berhasil. Hanya saja sedikit kekurangan berupa tidak munculnya icon clos iklan (x)
Penutup
Demikianlah artikel tentang cara buat iklan melayang di Blog yang Armaila terapkan pada blogspot yang menggunakan template viomagz. Hanya saja sedikit ada kendala berupa tidak munculnya atau terlihat tombol close (x).
Selamat mencoba dan semoga berhasil