Cara Membuat Widget Melayang ( Sticky ) Pada Blog 100% berhasil

Widget Melayang pada blog memang cocok pada blog kita yang isi dari postingan adalah artikel yang panjang, jadi ketika kita scroll ke bawah widget tidak kosong dan akan terisi dengan widget yang kita bikin melayang.

Cara Membuat Widget Melayang ( Sticky ) Pada Blog 100% berhasil. Sedangkan yang di maksud sticky adalah widget yang nempel atau melekat pada sidebar. Widget yang akan di buat nempel atau melayang ( sticky ) harus kita ketahui Id Widgetnya.

Namun adakala script ini tidak berjalan dengan baik pada beberapa themplate, namun apa salanya anda mencoba terlebih dahulu barangkali berhasil.

Baca Juga : 5 Cara Merawat Hardisk Komputer Supaya Awet dan Tahan Lama

Langsung saja berikut Cara Membuat Widget Melayang ( Sticky ) Pada Blog 100% berhasil :

#Langkah pertama buka Blog dan masuk Mode Edit HTML

#Setelah itu Copy kode di bawah ini di atas kode ]]></b:skin>

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

#Dan Copy Kode di bawah ini di atas kode </body>

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

#Setelah itu Simpan Template

NB.
Ganti kode yang berwarna merah dengan id widget yang ingin dibuat sticky,tanda # jangan dihapus. Untuk cara mengehatui Id Widget bisa kunjungi artikel di bawah ini.

Baca Juga : Cara Mengetahui ID Widget dengan Cepat Dan Mudah

Mungkin itu yang bisa saya sampaikan, semoga bisa bermanfaat dan menambah sedikit pengetahuan anda mengenai script widget ini, cukup sekian dari saya semoga berhasil.

Tweet