Membuat Widget Sidebar Melayang

Cara Membuat Sticky Sidebar atau Sidebar Melayang di Blog –  Widget Sticky atau yang lebih dikenal dengan widget melayang pada sidebar blog adalah tampilan widget melayang pada sidebar jika halaman di scroll akan selalu melayang, ini berfungsi untuk mengisi kekosongan saat halaman blog di scroll.

Selain untuk mengisi kekosongan halaman saat di scroll, widget sticky ini juga sangat bermanfaat untuk memodifikasi tampilan blog anda, pengunjung akan diberikan tampilan menarik pada sidebar blog ketika membaca artikel sampai dengan selesai.

Sticky sidebar atau Widget Sidebar Melayang bisa anda gunakan pada semua widget yang ada di sidebar, misalnya widget popular post, recent post, label, iklan blog dll. Jadi anda bisa sesuaikan dengan kebutuhan.

Cara Membuat Sidebar Melayang di Blog

Untuk membuat Widget sidebar melayang, element yang dibutuhkan adalah ID Widget. Jadi silahkan tentukan ID tersebut terlebih dahulu sebelum memasangnya diblog. caranya sebagai berikut:

Tentukan widget yang ingin dibuat Sticky (melayang), kemudian ambil ID widget tersebut. misalkan saya ingin membuat sticky pada widget Artikel Terbaru pada blog saya kemudian klik kanan pada title widget dan pilih “Inspect Element“, maka cara mengambil ID widget sebagai berikut:

Cara Memasang Kode Sticky di blog

1. login akun blogger anda.

2. Pilih Template kemudian Edit HTML, kemudian pasang kode berikut ini tepat diatas kode ]]></b:skin>

.sticky {position:fixed;top:10px;/* jarak dari atas*/z-index: 100;max-width: 300px;}

 3. Lalu Tambahkan kode CSS berikut tepat diats kode </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML4').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML4').addClass('sticky');
} else {
$('#HTML4').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>

Ganti semua kode #HTML4 dengan ID widget yang akan dibuat sticky.

4. Selesai dan lihat hasilnya.

Jika cara diatas tidak bisa berjalan, maka anda bisa menggunakan cara berikut ini untuk membuat widget sticky:

Membuat Widget Sticky Pada Sidebar (alternatif)

1. login akun blogger anda.
2. Pilih Template kemudian Edit HTML, kemudian pasang kode berikut ini tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function () {
var offset = $("#HTML4").offset();
var topPadding = 0;
$(window).scroll(function () {
if ($(window).scrollTop() &gt; offset.top) {
$("#HTML4").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
})
} else {
$("#HTML4").stop().animate({
marginTop: 0
})
}
})
});
</script>

Ganti #HTML4 dengan ID widget ayng ingin dibuat melayang (sticky).

3. Save template dan lihat hasilnya.

Bagaimana mudah bukan? sekarang anda bisa memulai Membuat Widget Sidebar Melayang di Blogspot dengan mudah. Semoga bermanfaat dan selamat mencoba.

Referensi:
http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html
http://www.kompiajaib.com/2012/11/cara-membuat-stiky-sidebar-atau-sidebar-melayang.html