gacerindo, pada postingan kali ini saya akan membahas tentang cara membuat sticky ads pada sidebar blog AMP ataupun Non AMP. Nantinya sidebar ini akan tetap diam walaupun discroll kebawah hingga mendekati footer blog.
Sebelumnya saya juga telah membahas Update Google Adsense Tentang Stciky Ads, tentunya ini adalah kabar baik bagi para publisher adsense yang ingin menerapkan sticky ads.
Sebagai contohnya bisa dilihat blog ini, terdapat sidebar yang menggunakan sticky ads. Bisa dicoba dengan melakukan scroll kebawah.
Bagi yang mau mencobanya silahkan ikuti panduannya dibawah ini.
Membuat Sticky Ads Sidebar Blog AMP dan Non AMP
1. Masuk ke akun blogger kalian
2. Pilih Tema, kemudian pilih Edit HTML
3. Letakan kode dibawah ini, diatas kode </head>
<style type='text/css'>
#sidebar-sticky {
width: 300px;
float: right;
padding: 0;
margin: 0 auto;
position: -webkit-sticky;
position: sticky;
top: 10px;
}
</style>
4. Silahkan atur lebar atau widht-nya sesuai dengan lebar sidebar kalian
5. Letakan kode dibawah ini, setelah kode </aside>
Sehingga hasilnya seperti dibawah ini
<div id='sidebar-sticky'>
<b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
</div>
Sehingga hasilnya seperti dibawah ini
<aside itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
<div id='sidebar-right'>
...........
...........
...........
</div>
</aside>
<div id='sidebar-sticky'>
<b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
</div>
6. Kemudian Save Template
7. Kemudian masuk lagi ke Tata Letak, Silahkan masukan tambahkan kode iklan pada gadget yang tersedia.
8. Lihat hasilnya.
Membuat Sticky Widget Berhenti Diatas Footer Blog Non AMP
1. Masuk ke akun blogger kalian
2. Pilih Tema, kemudian pilih Edit HTML
3. Letakan kode dibawah ini diatas kode </body>
<script>
//<![CDATA[
$(function(){ // document ready
if ($('#sticky').length) { // make sure "#sticky" element exists
var el = $('#sticky');
var stickyTop = $('#sticky').offset().top; // returns number
var stickyHeight = $('#sticky').height();
$(window).scroll(function(){ // scroll event
var limit = $('#footer').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
el.css({ position: 'fixed', top: 0 });
}
else {
el.css('position','static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({top: diff});
}
});
}
});
//]]>
</script>
4. Atau dengan menambahkan class seperti dibawah ini
<script>
//<![CDATA[
$(function(){ // document ready
if ($('#sticky').length) { // make sure "#sticky" element exists
var el = $('#sticky');
var stickyTop = $('#sticky').offset().top; // returns number
var stickyHeight = $('#sticky').height();
$(window).scroll(function(){ // scroll event
var limit = $('#footer').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
el.css({ position: 'fixed', top: 0 });
el.addClass("intro");
}
else {
el.css('position','static');
el.removeClass("intro");
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({top: diff});
el.removeClass("intro");
}
});
}
});
//]]>
</script>
5. Kemudian letakan CSS dibawah ini
.intro {
..................
..................
..................
}
6. Apabila ingin memakai warna background tinggal menambahkan pada CSS-nya seperti dibawah ini.
.intro{background:red!important}
Kesimpulan
Google membolehkan penempatan Sticky Ads asalkan harus sesuai dengan persyaratan. Bahkan untuk blog amp, sudah disupport dengan adanya amp-sticky-ad.
Bagi kalian yang mempunyai blog amp seperti saya, memang terasa sulit menerapkan berbagai kode agar valid amp, karena saya memakai blogspot bukan wordpress.
Untuk kalian para pengguna wordpress sangatlah beruntung, karena tinggal memakai plugin untuk mendukung blog sesuai keinginanmu.
