Cara Membuat Posisi Widget Sidebar Tidak Bergerak di Blog - d-ii

Cara Membuat Posisi Widget Sidebar Tidak Bergerak di Blog

Cara Membuat Posisi Widget Sidebar Tidak Bergerak di Blog


Bagaimana Cara membuat posisi widget Sidebar tidak bergerak di Blog ? Pernah gak kalo kita melihat Blog yang terdapat bagian sidebar akan tetapi ketika kita scroll kebawah masih dalam posisi tetap, terlihat cantik kan ?hem
nah,, untuk membuat bagian tetap tidak sulit kok, berikut Tutorialnya :

Cara yang pertama :
1.Masuk ke Blog Blogger kemudian edit Template, kemudian Copy kode dibawah ini lalu letakan diatas ]]></b:skin>

    sticky {
  position:fixed;
  top:30px;
  z-index: 100;
}

2.Kemudian Copy dibawah ini dan letakan diatas </body>

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


Penjelasan nya :
Berwarna Biru : Top 30px (untuk mengatur jarak antara Top atas sama sidebar nya ketika discroll kebawah, ubah sesuai dengan menyesuaikan template kamu)

Berwarna Merah : #Sidebartop (id dari sidebar template, ganti dengan id sidebar kamu)


Cara Simple Yang Kedua :
1.Login ke Blog Blogger kemudian Ke Menu Tata Letak Tambahkan Gadget Html/JavaScript
2.Kemudian Copy kode dibawah ini kemudian paste pada Gatget Html/JavaScript tersebut

     <style>
    .sticky {
      position:fixed;
      top:30px;
      z-index: 100;
    }
    </style>
    <script type='text/javascript'>
    $(document).ready(function() {
    var stickyWidgetTop = $('#sidebartop').offset().top;
    var stickyWidget = function(){
    var scrollTop = $(window).scrollTop();
    if (scrollTop > stickyWidgetTop) {
        $('#sidebartop').addClass('sticky');
    } else {
        $('#sidebartop').removeClass('sticky');
    }
    };
    stickyWidget();
    $(window).scroll(function() {
        stickyWidget();
    });
    });
    </script>

Penjelasan nya dari kedua cara diatas :
Berwarna Biru : Top 30px (untuk mengatur jarak antara Top atas sama sidebar nya ketika discroll kebawah, ubah sesuai dengan menyesuaikan template kamu)

Berwarna Merah : #Sidebartop (id dari sidebar template, ganti dengan id sidebar kamu)
Jika bingung? untuk menemukan id Sidebar nya, silahkan edit html template kemudian cari  bagian widget atau sidebar (contohnya gambar dibawah ini)

 
Setelah itu Save Template dan selesai bisa melihat hasil nya ketika di scroll kebawah maka akan dalam posisi Tetap (Untuk DEMO silahkan melihat Widget Sidebar Blog Ini)

Cara Membuat Posisi Widget Sidebar Tidak Bergerak di Blog

Author:

#

Artikel Menarik Banget ? d-ii , Suka...

Scroll to top