Cara membuat widget tetap di tempat / Sticky widget

Oleh Unknown

Selasa, 17 Juni 2014

Bagikan :

Tweet

Sahabat blogger, kali ini saya akan share tentang cara membuat widget tetap di tempat walaupun sudah di scroll atau yang dikenal sebagai sticky widget. Kang PP juga memakainya lho.

Demo Langsung di Blog Kang PP

Berikut cara untuk membuat widget tetap di tempat setelah di scroll atau sticky widget :

1.  Log In ke Blogger

2.  Masuk ke Template > Edit Html

3.  Cari kode ]]></b:skin> , lalu letakan tepat di atasnya kode berikut

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

4. Lalu letakan kode berikut tepat di atas kode </body>

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

5.  Simpan Template

Keterangan :
=> Lihat kode top:10px; itu merupakan jarak widget dari atas
=> Kode yang diberi warna merah pada JAVASCRIPT merupakan id dari widget yang akan dibuat sticky

Tips :
Untuk mengetahui id widgetnya, lihat gambar berikut :

Caranya pergi ke Tata Letak, klik edit pada widgetnya lalu lihat pada adrees barnya, maka terdapat bacaan widgetid= , nah tulisan setelah widgetid= itulah id widgetnya.

Semoga Bermanfaat ^_^

Tag : Tutorial Blog, Widget