KacaTeknologi.com – Iklan sticky/sticky ads/iklan melayang adalah salah satu format iklan yang dapat Anda manfaatkan untuk meningkatkan penghasilan AdSense Anda. Biasanya iklan ini menempel di bagian samping layar, bawah layar, atau di bagian atas layar. Jika Anda menggunakan iklan otomatis pada AdSense, untuk mengaktifkan iklan sticky sebenarnya bisa dengan mengaktifkan iklan anchor. Hanya saja iklan anchor berlaku untuk mobile saja dan cenderung tampil di bagian atas layar.
Untuk membuat iklan sticky pada desktop/komputer maka Anda memperlukan kode tambahan dalam membuatnya karena AdSense sendiri belum mendukung iklan sticky untuk desktop. Hanya saja ada beberapa hal yang perlu Anda perhatikan dalam memasang iklan sticky ini. Berikut adalah hal yang perlu diperhatikan dalam memasang iklan sticky/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.
Setelah mengetahui hal yang harus Anda patuhi dalam memasangnya, iklan sticky juga terbukti dapat meningkatkan CTR (Click Through Rate) atau Rasio Klik Tayang meningkat dikarenakan memiliki keterlihatan/view ability yang tinggi. Jika iklan yang ditampilkan relevan dengan pengguna maka iklan sticky ini biasanya mendapatkan rata-rata klik terbanyak dan otomatis penghasilan pun bertambah.
Sebelumnya pihak Google AdSense melarang iklan jenis ini karena menganggu pembaca dan banyaknya klik yang tidak sengaja. Namun setelah diteliti ulang, ternyata iklan jenis ini bisa menjadi penyumbang penghasilan terbesar bagi para publisher. Oleh karena itu, pihak AdSense memperbolehkan iklan sticky ini untuk kembali digunakan.
Dalam proses pemasangan ada yang mengharuskan unit iklan berukuran tetap dan ada juga yang berpendapat harus menggunakan unit iklan responsif. Dinatara kedua pendapat tersebut sama saja, namun saya lebih setuju kepada pendapat kedua. Alasannya karena fitur AdSense ini sudah sangat pintar sehingga iklan yang ditampilkan dapat menyesuaikan tata letak template. Selain itu iklan responsif lebih fleksibel daripada iklan berukuran tetap
Bagaimana? Tertarik dengan jenis iklan ini?
Cara Membuat Iklan Sticky di Bawah Layar Blog
1. Untuk Desktop
Kita mulai untuk desktop terlebih dahulu. Seperti yang Anda lihat, iklan akan muncul di tepi bawah layar seperti yang terpasang pada situs ini. Adapun jika Anda ingin menghilangkan iklan tersebut Anda cukup mengklik tanda panah atau tanda silang saja. Hal ini bertujuan agar pembaca yang merasa terganggu dengan adanya iklan sticky ini bisa langsung menutupnya.
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.
- 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.
<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=’ID Google Adsense Anda‘ data-ad-slot=’ID Unit iklan kalian‘ 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>
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>
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).
2. Untuk Mobile Android/iOS
Yang kedua Anda bisa mengaktifkannya juga pada perangkat mobile/smartphone. Namun kode di atas hanya diperuntukan untuk desktop saja dan tidak akan muncul di perangkat mobile. Oleh karena itu, Anda perlu menambahkan beberapa kode lagi untuk ini.
Pada mobile pun sama, iklan akan tampil di bagian bawah layar dan tidak akan berpindah tempat. Tidak seperti iklan anchor yang bisa berpindah tempat atau cenderung tampil di bagian atas saja. Berikut adalah cara membuat iklan sticky blog di bawah layar mobile/smartphone:
- Silakan masuk ke dasbor blogger lagi dan edit tema blog.
- Cari kode </head>.
- Letakan kode berikut tepat di atas kode yang disebutkan.
- Sekarang letakan kode di bawah ini tepat di atas kode </body>.
- Simpan tema dan seharusnya iklan sticky berhasil dipasang.
<b:if cond=’data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" and not data:blog.searchQuery’>
<style>
/*<![CDATA[*/
.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: -104px;
left: 0;
width: 100%;
z-index: 999;
max-height: 104px;
background-image: none;
background-color: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
margin-bottom: 0;
padding-top: 4px;
transition: all .4s ease-in-out;
}
.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=’341 8 13 13′ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’%3e%3cg%3e%3cpath style=’fill:%234F4F4F’ d=’M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z’%3e%3c/path%3e%3c/g%3e%3c/svg%3e”);
background-size: 13px 13px;
background-position: 9px;
background-color: #fff;
background-repeat: no-repeat;
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
border: none;
border-radius: 12px 0 0 0;
cursor: pointer;
}
.sticky-ad-close-button:before {
position: absolute;
content: “”;
top: -20px;
right: 0;
left: -20px;
bottom: 0;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:active,
:focus {
outline: 0
}
/*]]>*/
</style>
</b:if>
<style>
/*<![CDATA[*/
.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: -104px;
left: 0;
width: 100%;
z-index: 999;
max-height: 104px;
background-image: none;
background-color: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
margin-bottom: 0;
padding-top: 4px;
transition: all .4s ease-in-out;
}
.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=’341 8 13 13′ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’%3e%3cg%3e%3cpath style=’fill:%234F4F4F’ d=’M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z’%3e%3c/path%3e%3c/g%3e%3c/svg%3e”);
background-size: 13px 13px;
background-position: 9px;
background-color: #fff;
background-repeat: no-repeat;
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
border: none;
border-radius: 12px 0 0 0;
cursor: pointer;
}
.sticky-ad-close-button:before {
position: absolute;
content: “”;
top: -20px;
right: 0;
left: -20px;
bottom: 0;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:active,
:focus {
outline: 0
}
/*]]>*/
</style>
</b:if>
<b:if cond=’data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" and not data:blog.searchQuery’>
<div class=’sticky-ad’ id=’sticky-ad’>
<ins class=’adsbygoogle’ data-ad-client=’ID Google Adsense Anda‘ data-ad-slot=’ID Unit iklan Anda‘ style=’display:inline-block;width:320px;height:50px’/><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<button aria-label=’Close this ad’ class=’sticky-ad-close-button’ onclick=’document.getElementById('sticky-ad').style.display='none';’/>
</div>
<script>
//<![CDATA[
window.addEventListener(“scroll”,function(){
var target = document.getElementById(‘sticky-ad’);
if(window.pageYOffset > 300){
target.style.bottom = “0”;
}
},false);
//]]>
</script>
</b:if>
<div class=’sticky-ad’ id=’sticky-ad’>
<ins class=’adsbygoogle’ data-ad-client=’ID Google Adsense Anda‘ data-ad-slot=’ID Unit iklan Anda‘ style=’display:inline-block;width:320px;height:50px’/><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<button aria-label=’Close this ad’ class=’sticky-ad-close-button’ onclick=’document.getElementById('sticky-ad').style.display='none';’/>
</div>
<script>
//<![CDATA[
window.addEventListener(“scroll”,function(){
var target = document.getElementById(‘sticky-ad’);
if(window.pageYOffset > 300){
target.style.bottom = “0”;
}
},false);
//]]>
</script>
</b:if>
Catatan: Untuk unit iklan, Anda bisa menggunakan unit iklan yang sama seperti yang diterapkan pada desktop di atas jika unit iklannya responsif. Jika iklan desktop berukuran tetap maka Anda perlu membuat unit iklan baru untuk perangkat mobile dengan ukuran 320×50. Pastikan kode unit iklan yang dimasukkan adalah unit iklan display bukan in-article, in-feed, dsb.
Silakan Anda cek kembali situs Anda dan iklan sticky pasti tampil. Namun saya menemukan beberapa pertanyaan yang sering ditanyakan. Contohnya seperti di bawah ini:
Bagaimana cara mengatasi iklan AdSense yang tidak tampil/blank pada Blog?
Untuk masalah ini sebenarnya tidak ada kaitannya dengan sticky ads. Karena iklan tidak tampil bukan karena jenis iklannya namun biasanya terdapat kesalahan pada kode atau ada sesuatu yang memblokir iklan untuk tampil. Saya tidak akan menjelaskan panjang lebar di sini, jika penasaran cek saja pada artikel ini: https://www.kacateknologi.com/2019/06/cara-mengatasi-iklan-adsense-tidak-muncul.html.
Oke cukup sekian untuk kali ini, saya harap dengan terpasangnya ikan sticky pada blog Anda dapat membuat penghasilan menjadi bertambah dan tentu dengan bantuan trafik. Semoga bermanfaat…
Kira-kira kode iklan stickynya buat blog berat tidak, min…???
Halo kak,
Kodenya tidak akan membuat situs berat karena ini hanya kode untuk frame AdSense saja. Terlebih lagi jika menggunakan lazy load script. Namun, kembali lagi ke performa situs masing-masing dan bagaimana script adsense dipanggil.