Cara Menciptakan Widget Sidebar Melayang Di Blogspot
Cara Membuat Sticky Sidebar atau Sidebar Melayang di Blog – Widget Sticky atau yang lebih dikenal dengan widget melayang pada sidebar blog yakni tampilan widget melayang pada sidebar jikalau halaman di scroll akan selalu melayang, ini berfungsi untuk mengisi kekosongan ketika halaman blog di scroll.
Selain untuk mengisi kekosongan halaman ketika di scroll, widget sticky ini juga sangat bermanfaat untuk memodifikasi tampilan blog anda, pengunjung akan diberikan tampilan menarik pada sidebar blog ketika membaca artikel hingga dengan selesai.
Sticky sidebar atau Widget Sidebar Melayang dapat anda gunakan pada semua widget yang ada di sidebar, contohnya widget popular post, recent post, label, iklan blog dll. Makara anda dapat sesuaikan dengan kebutuhan.
Baca Juga: Cara Membuat Recent Post Keren di Blogspot
Cara Membuat Sidebar Melayang di Blog
Untuk menciptakan Widget sidebar melayang, element yang diharapkan yakni ID Widget. Makara silahkan tentukan ID tersebut terlebih dahulu sebelum memasangnya diblog. caranya sebagai berikut:
Tentukan widget yang ingin dibentuk Sticky (melayang), kemudian ambil ID widget tersebut. misalkan saya ingin menciptakan 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 isyarat berikut ini sempurna diatas isyarat ]]></b:skin>
.sticky {position:fixed;top:10px;/* jarak dari atas*/z-index: 100;max-width: 300px;} 3. Lalu Tambahkan isyarat CSS berikut sempurna diats isyarat </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 isyarat #HTML4 dengan ID widget yang akan dibentuk sticky.
4. Selesai dan lihat hasilnya.
Jika cara diatas tidak dapat berjalan, maka anda dapat memakai cara berikut ini untuk menciptakan widget sticky:
Membuat Widget Sticky Pada Sidebar (alternatif)
1. login akun blogger anda.
2. Pilih Template kemudian Edit HTML, kemudian pasang isyarat berikut ini sempurna diatas isyarat </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 dibentuk melayang (sticky).
3. Save template dan lihat hasilnya.
Bagaimana gampang bukan? kini anda dapat 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