Cara Membuat Sidebar Mengikuti Scroll atau Sticky Widget

Cara Membuat Sidebar Mengikuti Scroll atau Sticky Widget - Banyak di antara kalian yang bertanya tanya bagaimana caranya membuat sidebar pada blog bergerak mengikuti scroll,  sebenarnya caranya simple, kalian cuman bnutuh menambahkan javascript pada blog kalian, nah saya mendapat cara ini dari Blog Arlina, tapi mudah-mudahan disini saya akan menjelaskan lebih detail

Sebelumnya kita tahu bahwa pada sidebar terdapat beberapa widget yang terdapat beberapa fungsi seperti menampilkan Recent Post, Label, Search Box, dll. tetapi tidak semua pembaca akan melihat semua widget anda, terlebih ketika konten anda panjang, otomatis widget akan terlewat, nah para Blogger biasanya menggunakan sticky widget untuk membuat widget akan mengikuti kemana scroll bergerak, biasanya widget yang berisikan hal penting seperti Label, Postingan Baru, Subscribe, Archive, dll. Tapi ingat, jangan menaruh Adsense pada widget yang bergerak ya! Ok, Langsung Saja

Langkah Pertama yaitu membuka Edit HTML pada pengaturan Tema di HTML

Langkah Kedua tambahkan JavaScript ini sebelum/diatas </body>

<!--StickyWidget-->
<script type='text/javascript'>//<![CDATA[
$(function() {if ($('#sidebar-wrapper').length) {      //ganti bagian ini dengan id widget anda
var el = $('#sidebar-wrapper');
var stickyTop = $('#sidebar-wrapper').offset().top;
var stickyHeight = $('#sidebar-wrapper').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20;     //ganti bagian ini dengan id widget pembatas
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 30});      //sesuaikan dengan tinggi blog atau selera anda
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff});
}
});
}
});
//]]>
</script>

Setelah menambahkan javascript diatas kedalam blog anda Perhatikan bagian yang saya tandai.

Pada bagian sidebar-wrapper ganti dengan id pada widget anda

Pada bagian footer-wrapper ganti dengan id batas dimana widget anda akan berhenti

(pada bagian footer harap teliti dan tidak lebih tinggi dari posisi widget yang anda ingin jadikan sticky)

Langkah Ketiga tambahkan css untuk mengatur widget yang akan anda jadikan sticky, ditakutkan widget akan membesar ketika men-scroll, letakkan Kode ini sebelum atau diatas ]]></b:skin>

#sidebar-wrapper{
max-width: 100%;
}

Ganti bagian yang saya tandai dengan id yang anda pakai untuk javascript di atas, jika widget anda malah membesar coba dengan css ini 

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

Setelah cara diatas dilakukan seharusnya ketika anda men-scroll halaman blog anda, ada widget yang akan menyangkut dan ikut turun kebawah.

Lantas bagaimana caranya membuat sticky sidebar dengan 2 widget atau lebih.

Caranya adalah kalian harus membungkus 2 widget tersebut dengan div yang mempunyai id yang nantinya akan di panggil oleh javascript di atas atau dengan kata lain mengganti sidebar-wrapper di atas dengan id yang baru(id pembungkus).

Bingung gan? nih saya kasih contoh pembungkusan sticky widget - Pahami HTML dan JS nya,
Tidak berhasil? kalian bisa membuat 2 javascript seperti diatas dengan id yang berbeda tetapi saya tidak menyarankannya.

Sticky Widget Menghalangi Konten Pada Tampilan Mobile

Nah biasanya blog blog yang responsive juga akan menampilkan sticky widget tersebut dan akan menutupi konten, Lantas Bagaimana Caranya Menonaktifkan Sticky Widget Pada Tampilan Mobile

Kalian hanya butuh menyisipkan kode ini pada javascriptnya tepatnya diatas js tersebut.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
..Isi JavaScript diatas..
</b:if>

Jangan lupa tutup dengan </b:if> ya pada bagian akhir.
Sekian yang bisa saya sampaikan mengenai Cara Membuat Sidebar Mengikuti Scroll atau Sticky Widget, Terimakasih.