CARA MEMBUAT ELEMEN STICKY WIDGET PADA SIDEBAR BLOGGER

Widget yang sticky alias lengket dapat diterapkan pada template lama adalah bukan hal baru samasekali, namun pada kesempatan ini saya ingin melakukan sedikit modifikasi ringan agar widget tersebut dapat muncul dengan baik pada layar tablet ukuran 9,7 inch dengan mode landscape (bukan portrait). Adalah hal penting untuk memastikan semua elemen bekerja responsif pada semua layar perangkat PC dan mobile.

Panduan ini hanya dapat di terapkan pada template lama seperti tema sederhana, awesome dst.

Silahkan masuk kepengaturan Blogger, masuk ke halaman editor HTML dan cari kode </head>, perhatikan kode CSS berikut:

<style> #PopularPosts1{width:inherit;
max-width:380px
}
@media only screen and (min-width:400px) and (max-width:970px){
#PopularPosts1{display: none!important;}
}</style>

Kode pengaturan CSS tersebut di letakan sebelum atau di atas kode tag penutup </head>. Saya menandai dua kata dengan warna. Satu warna biru yang lainnya merah. Warna biru adalah widget yang ingin kita buat jadi sticky, Anda bisa menggantinya dengan #Profile1, #Label1, dst. Sedangkan kata yang berwarna merah sebenarnya saya merombaknya dari kode aslinya yang saya dapatkan di internet: 

<style> #PopularPosts1{width:100%;
max-width:380px
}........dst

100% ternyata membuat sidebar melebar melewati batas pada saat konten di scroll ke atas. Contoh di atas saya buat untuk widget PopularPost, bukan PopularPost2 dst.

Langkah selanjutnya cari kode </body> dan letakan kode Javascript berikut tepat diatasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/><script type='text/javascript'>

//<![CDATA[
$(function() {
if ($('#PopularPosts1').length) {
var el = $('#PopularPosts1');
var stickyTop = $('#PopularPosts1').offset().top;
var stickyHeight = $('#PopularPosts1').height();
$(window).scroll(function() {
var limit = $('#FollowByEmail1').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20
});
} else {el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({top: diff
});
}
});
}
});
//]]>
</script>

Save template. Seharusnya saya memberi judul tulisan ini dengan 'Cara membuat sticky PopularPosts1 pada sidebar Blogger' Tapi karena  sebenarnya Anda dapat menggantinya widget lain yang tersedia sesuai dengan selera Anda. Judul urung kami terapkan. he he he..

Lihat DEMO

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: