Cara Membuat Sticky Widget di Sidebar Blog

(isi iklan)

Pada artikel sebelumnya saya pernah berbagi tutorial tentang Memasang Fungsi Sticky Pada Widget Blogger, kali ini saya akan berbagi tutorial dengan fungsi yang sama yaitu untuk membuat widget tertentu menjadi sticky atau melayang mengikuti halaman saat digulirkan ke bawah dan atas. Tutorial ini merupakan perbaikan sekaligus menjawab komentar sobat dari tutorial sebelumnya yang ketika halaman digulir ke bawah sticky widget akan melewati Footer Wrapper dan itu akan sedikit mengganggu karena menghalangi widget yang dipasang di area Footer.
Untuk contohnya seperti yang ada pada Recent Posts pada blog saya ini, hasilnya akan seperti itu untuk script di bawah ini yang saya akan  bahas.

(Sticky Widget seperti puya saya)

Kode yang akan saya bagikan ini lebih cocok dipasang pada semua konten di Sidebar atau bisa juga dipasang pada salah satu widget tertentu.Bagi sobat yang ingin mencobanya, silakan ikuti tutorial Cara Membuat Sticky Widget di Sidebar Blog.

Cara Membuat Sticky Widget di Sidebar Blog

1. Login ke Blogger > Buka Template editor > Tambahkan kode di bawah ini sebelum </body>

<script type="text/javascript">//<![CDATA[$(function() {if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentuvar el = $('#sticky-sidebar');var stickyTop = $('#sticky-sidebar').offset().top;var stickyHeight = $('#sticky-sidebar').height();$(window).scroll(function() {var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"var windowTop = $(window).scrollTop();if (stickyTop < windowTop) {el.css({position: 'fixed',top: 20 // Jarak atau margin sticky dari atas});} else {el.css('position', 'static');}if (limit < windowTop) {var diff = limit - windowTop;el.css({top: diff});}});}});//]]></script>

Perhatikan kode yang ditandai warna Briu, ganti kode tersebut dengan ID yang akan dibuat sticky sesuai template yang digunakan, sedangkan warna Hijau ganti kode tersebut dengan ID untuk berhentinya Sticky .
seperti contoh punya saya seperti ini penampakanya:

#sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky

#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky

Pilih sesuai keinginan yang kalian butuhkan sesuai dengan selera masing masing.

Selanjutnya tambahkan lebar pada konten atau widget yang dibuat sticky dengan CSS. Misalkan di sini saya memberikan 300px untuk lebar sticky, contoh :

#sticky-sidebar{width:100%;max-width:300px}

Atau

#HTML1{width:100%;max-width:300px}

Letakkan kode di atas sebelum </style>

Tentukan lebar sesuai dengan lebar sidebar dari template yang sobat gunakan dan juga jangan lupa untuk mengganti lebar pada media query tertentu, contoh :

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

Cukup mudah bukan? Selamat mencoba dan salam sukses. 
Oke sudah cukup jelas penjelasan di atas, bila ada yang belum jelas bisa di tanyakan langsung ke komentar ya....
Salam Bloggers....

Tweet

Judul	Cara Membuat Sticky Widget di Sidebar Blog
Deskripsi	Pada artikel sebelumnya saya pernah berbagi tutorial tentang Memasang Fungsi Sticky Pada Widget Blogger, kali ini saya akan berbagi tutorial...
Author	Unknown
Author Rating	89,99%/ 100% Suara Dari 9999 Ulasan

Share this with short URL: Get Short URL

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di IDCEPU

Tag : Blogger, TIPS BLOGER