Cara Membuat Widget Statis di Sidebar Blog

Pusat Baclinks - Pada kesempatan kali ini kita akan membahas bagaimana caranya membuat Widget Statis / Sticky Widget di Sidebar blog atau web hosting blogger. Struktur blog pada umumnya mempunyai widget yang terpasang pada sidebar kanan dan atau kiri. Widget tersebut dapat berisi iklan, popular post, kategori dan lain sebagainya. Sesuai dengan judul artikel membuat widget sidebar statis, yang artinya widget pada sidebar tersebut tidak bergerak (tetap) ketika scroll digeser ke bawah. Mungkin juga cara ini disebut Sticky (melayang), namun intinya sama yaitu widget pada sidebar tidak bergerak. Keuntungannya widget tetap terlihat meskipun pembaca menscrollnya ke bawah.

Cara Membuat Widget Statis di Sidebar Blog

Nah sebelumnya untuk memasang Sticky Widget pada sidebar blog terlebih dahulu kita harus mengetahui ID Widget yang akan kita jadikan Sticky Widget atau Widget Statis jika di Scroll ke bawah footer blog. Simak penjelasan berikut untuk mengetahui ID Widget sobat :

1. Masuk ke Menu template Blogger kemudian Klik menu Tata Letak seperti gambar berikut :

Klik Edit Widget Paling Bawah

 

2. Perhatikan tanda panah pada gambar diatas kemudian klik edit maka akan muncul gambar berikut dan ID Widget sobat di tandai kotak merah yang akan dijadikan Statis :

ID Widget Berwarna Merah

Link Widget sobat biasanya akan seperti ini : 

https://www.blogger.com/rearrange?blogID=&action=editWidget&sectionId=sidebar&widgetType=null&widgetId=HTML6

dan yang bertanda merah itu adalah ID Widget anda yang berada di ujung Link Wdiget.

3. Nah setelah sobat mengetahui ID Widget masing-masing selanjutnya kita ke Cara Membuat Widget Statis di Sidebar Blog simak penjelasan selengkapnya ya.


Cara Membuat Widget Statis di Sidebar Blog

1. Letakan kode CSS di bawah ini di atas kode ]]></b:skin>

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

2. Kemudian letakan kode Java Script di bawah ini 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> 

3. Ganti tulisan yang berwarna merah dengan ID Widget Anda dengan catatan harus pakai # tagar/tanda pagar.

4. Simpan dan lihat hasilnya.

Catatan : Usahakan anda menggunakan Widget yang paling bawah di sidebar blog anda agar suapaya widget diatasnya tetap di tempatnya. Contohnya :

( klik gambar untuk memperbesar )

Demikianlah Artikel yang berjudul Cara Membuat Widget Statis di Sidebar Blog, Semoga bermanfaat dan bisa jadi referensi bagi sobat yang ingin Membuat Widget Statis di Sidebar Blog.

Bagikan