Update Terbaru, 15 April 2017
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.
Baca Juga: Cara Membuat Recent Post Keren di Blogspot
Daftar Isi:
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() > 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
kode widget itu apa saja an contohnya masih binung nih
Kode widget atau ID widget mas? kalau kode widget adalah kode yang digunakan untuk menampilkan widget seperti recent post, histats, dll. kalau ID widget, untuk mengetahuinya seperti yang sudah saya terangkan pada tutorial. setiap blog atau template tentu akan berbeda ID widgetnya.
Id widget itu kah bukan id blogger mas kalau di blogspot
Sangat berbeda mas, id widget itu berkaitan dengan theme, kalau id blog berkaitan dengan akun.
Bingung bang bikinnya, apa tergantung sama template blog juga yah?
Iya benar harus mengetahui struktur themenya