Membuat Sidebar & Widget Blog Statis, Melayang, atau Fixed

CARA membuat Sidebar & Widget Blog statis (static), melayang (floating), atau fixed alias tetap muncul saat halaman discroll seperti di blog ini sangat mudah.

Tinggal memasukkan kode tertentu ke dalam template.

Keuntungan membuat Sidebar & Widget Blog Statis, Melayang, atau Fixed ini adalah yang kita sajikan di sidebar tetap terlihat oleh user saat mereka membaca sebuah posting.

Kelemahannya, sidebar jadi tidak muncul di mobile version.

Cara Membuat Sidebar & Widget Statis
1. Template > Edit HTML
2. Copy & Paste "Sticky Sidebar & Widget Blogger Codes" berikut ini di atas kode </body> (ada di bagian bawah template)

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> // Hapus Kode ini jika sudah ada kode seperti ini di template Anda.
    <script type="text/javascript">
        $(function() {
            var offset = $("#sidebar-wrapper").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar-wrapper").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar-wrapper").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

Catatan
Template blog ini, elemen sidebarnya bernama #sidebar-wrapper, maka yang dimasukkan ke elemen kode di atas adalah #sidebar-wrapper. 

Jika nama elemen sidebar template blog Anda yang lain, misalnya .column-right-inner, maka itulah yang dimasukkan.

Cara mengeceknya:
1. Template > Edit HTML
2. Tekan Ctrl+F, ketik kata sidebar, dan tekan Enter!

Kode di atas juga berlaku untuk Menu Navigasi atau Top Header Bar jika ingin tetap muncul saat halaman di-scrooll ke bawah

MEMBUAT STATIS WIDGET TERTENTU
Jika ingin membuat yang statisnya Widget tertentu saja, misalnya widget Popular Posts, maka langkahnya sama dengan di atas:

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/> // Hapus Kode ini jika sudah ada kode seperti ini di template Anda.
<script src='http://resources.infolinks.com/js/infolinks_main.js' type='text/javascript'/>
    <script type='text/javascript'>
        $(function() {
            var offset = $(&quot;#HTML7&quot;).offset();
            var topPadding = 35;
            $(window).scroll(function() {
                if ($(window).scrollTop() &gt; offset.top) {
                    $(&quot;#HTML7&quot;).stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $(&quot;#HTML7&quot;).stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

*** Ganti kode HTML7 dengan kode HTML Widget kepunyaan Anda!

CARA LAINNYA:
1. Copas kode berikut ini di atas ]]</b:skin>

.sticky {
position:fixed;
top:10px;

z-index: 100;
}

2. Copas kode berikut ini di atas kode </body>

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

Sumber