Cara Membuat Sticky Widget Di Blogger

Tampilan menarik pada blog akan menjadi pusat perhatian pengunjung dan juga para blogger yang lain. Makanya, banyak blogger yang berlomba-lomba untuk mempercantik tampilan blog mereka dengan metode-metode dan design keren.

Widget sidebar merupakan komponen penting pada template, biasanya widget ini terdiri dari Populer Posts atau postingan terpopuler, Label, Archive, Recent Post, Subscribe box, Author profil dan banayk lagi. Tergantung dari pembuat template itu sendiri, mau memsang apa pada widget template yang dibuatnya. Lalu ada juga yang membuat tampilan widgetnya melayang. widget yang melayang ini disebut dengan istilah fixed-sticky atau sticky widget.

Widget sidebar yang melayang maksudnya adalah apabila kita scroll kebawah pada blog, maka widget tersebut tetap akan mengikut hingga pada titik yang di tentukan. Pada tutorial kali ini, saya akan membagikan cara membuat widget melayang pada template blog dan berhenti di footer. Langsung saja kita ke tahapan-tahapannya.

Cara Memasang Sticky Sidebar Responsive

1. Login ke blogger Anda, pilih theme lalu pilih edit HTML. Letakkan kode berikut ini diatas </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#sticky-widget1
').length)
var el = $('#sticky-widget1');
var stickyTop = $('#sticky-widget1').offset().top;
var stickyHeight = $('#sticky-widget1').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').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>

perhatikan pada area yang dimarking, genti kode tersebut dengan kode sidebar milik template blog Anda, karena setiap pemilik template biasanya memberikan nama yang berbeda pada setiap template buatannya.

#sticky-widget1 adalah widget yang akan di jadikan sticky / melayang
Sedangkan #footer-wrapper adalah titik pemberhentian sticky 

2. Selanjutnya, lakukan penambahan untuk ukuran width atau lebar sticky yang akan dibuat. Sebaiknya mengikuti ukuran sidebar Anda agar terlihat lebih rapih. untuk contohnya seperti berikut

#HTML2{width:100%;max-width:276px}

atau seperti ini

#sticky-widget1{width:100%;max-width:276px}

max-width yang digunakan adalah lebar sidebar pada template blog Anda, jadi sesuaikan lebarnya

Silakan check dengan teliti nama widget yang ingin Anda berikan efek sticky agar penggunaan trik ini bisa berhasil

3. Pada tahapan diatas, jika Anda sudah melakukan semuanya dengan benar maka sticky akan berfungsi. Namun untuk tampilan responsive, sebaiknya tambahkan kode CSS berikut ini

@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}}

Jika pada template Anda sudah ada kode @media only screen and (max-width:768px){ , maka simpan saja kode #sticky-widget1{width:100%;max-width:100%} dibawahnya

Untuk Hasilnya, silakan lihat di Sidebar Recents Post yang saya gunakan.
Sekian untuk totorial kali ini tentang cara membuat widget sticky atau melayang di blogger

Sumber : http://www.arlinadzgn.com/2015/12/cara.membuat.sticky.widget.di.sidebar.blog.html

Share