Cara Membuat Sticky Widget Pada Sidebar blog

Apa itu sebenarnya Sticky Widget, jadi sebenarnya nih teman teman Sticky Widget itu berfungsi saat sobat meng-scroll keatas widget nya akan tetap muncul atau juga disebut melayang, karena kita akan membuat widget tersebut pada posisi sidebar

Saat widget ini telah dibuat sobat bisa memasang widget ini untuk apa saja, seperti menambahkan text, logo, atau script pada Html, yang sudah tersedia

Baiklah seterusnya bagaimana cara untuk membuat Sticky widget pada sidebar..? anda harus menambahkannya sendiri setiap elemen kode

1. login ke akun blogger

2. kemudian ke Template pilih edit HTML, kemudian pasang kode css berikut tetap diatas kode ]]></b:skin>

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

3. Tambahkan script kode berikut tepat diatas 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>

Pada script di atas, pastikan ganti semua kode #HTML4 dengan ID widget yang akan dibuat sticky.

Jika cara di atas tidak bisa berjalan dengan baik, kita masih bisa menggunakan cara alternatif berikut ini untuk membuat widget sticky.

Cara Alternatif Lainnya

1. Login keblogger

2. Pergi ke Template dan pilih edit HTML

3. Tambahkan script dibawah ini tepat diatas Tag </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>