Skip to HeaderSkip to PostSkip to Footer

Cara Membuat Sticky Widget di Sidebar Blog

Table of Content
    Cara Membuat Sticky Widget di Sidebar Blog

    Cara Membuat Sticky Widget di Sidebar Blog - Sticky Berasal dari Bahasa Inggris Yang Artinya Menempel. Sticky Widget Adalah Kata Yang Sering Terdengar Dalam Istilah Blogger, Namun Masih Banyak Yang Belum Memahami Apa itu Sticky Widget. Sticky Widget adalah Widget Yang di Pasang Di Blog Namun Jika Blog Di Scroll Kebawah maka Widget itu Akan Ikut Kebawah Mengikuti Gerak Scroll. Nah, Pada Kesempatan Kali ini J4rviz Blog Akan Membagikan Tutorial Memasang Sticky Widget di Blog Sobat. Oke Simak dengan Seksama ya....

    Cara Pemasangan

    Untuk Pemasangan Sticky Widget, Caranya Sangat Mudah yaitu Dengan
    1. Pemasangan CSS
    2. Pemasangan JavaScript

    Pemasangan CSS

    1. Login Ke Blogger
    2. Masuk Ke Template > Edit HTML
    3. Masukan CSS Berikut di atas ]]></b:skin>

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

    Pemasangan JavaScript

    1. Login Ke Blogger
    2. Masuk Ke Template > Edit HTML
    3. Masukan JavaScript Berikut di atas </body>
    <script type='text/javascript'>
    $(document).ready(function() {
    var stickyWidgetTop = $('#HTML7').offset().top;
    var stickyWidget = function(){
    var scrollTop = $(window).scrollTop();
    if (scrollTop > stickyWidgetTop) {
    $('#HTML7').addClass('sticky');
    } else {
    $('#HTML7').removeClass('sticky');
    }
    };
    stickyWidget();
    $(window).scroll(function() {
    stickyWidget();
    });
    });
    </script>
    Ganti Tulisan HTML7 Dengan ID Widget Sobat yang akan di Buat Sticky Widget.

    Cara Mencari ID Widget

    1. Login Ke Blogger
    2. Masuk Ke Tata Letak
    3. Pilih Widget Yang akan Di buat Sticky Widget dan Klik Edit
    4. Lalu Lihat Gambar Berikut Untuk Mencari ID Widget
    Mencari ID Widget Sebuah Widget




    oke... itulah sedikit Tutorial dari J4rviz Blog...
    Semoga Tutorial ini Bermanfaat..
    terima kasih sudah berkunjung dan jangan lupa Komen + Follow Blog ini untuk Mengikuti Update terbaru J4rviz Blog

    Comments

    Post a Comment

    This is a comment message for you.