Membuat Sticky Widget (Melayang Ketika Scroll Turun)

Sticky


Sticky dalam bahasa indonesia mempunyai arti menempel, bagi yang sudah tau Sticky Widget mungkin saya tidak akan banyak menjelaskan, namun bagi sobat yang belum tau, saya akan menerangkannya sedikit, sticky dalam dalam istilah website berarti melayang diatas walau scroll turun kebawah, nah mungkin itu yang dapat saya jelaskan, apa bila masih bingung silahkan arahkan mouse sobat ke scroll blog ini, sekarang turunkan scroll nya dan lihat pada sidebar kanan yang bawah, nah itu dia Sticky Widget

Ikuti langkah dibawah ini untuk memasangnya pada blog anda

Menambahkan CSS
1. Setelah masuk di Blogger
2. Pilih Template dan pilih lagi Edit HTML
3. Copy kode dibawah ini dan letakkan di atas ]]></b:skin>

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

Menambahkan Javascript

Simpan Javasrcipt ini diatas kode </body>

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

Ganti ID #HTML3 dengan ID Widget yang akan dijadikan Sticky Widget.

21 Responses to "Membuat Sticky Widget (Melayang Ketika Scroll Turun)"

  1. pertamaxx gan !
    makasih ni udah dibuatin tutor :)

    ReplyDelete
    Replies
    1. ane coba kok munculnya dibawah gan ???g kyk punya agan :(

      Delete
    2. karna widget sobat yang ingin dijadikan sticky widget, posisi widgetnya berada di letak footer sih, jadi tetap berada dibawah, coba pindah ke sidebar widgetnya

      Delete
    3. keren, saya ijin kopi script mas...

      Delete
  2. wah..
    kereenn...
    bisa nambah ilmu

    ReplyDelete
  3. Hemmm, Ini akan membuat loading blog kita menjadi lemoot tidak gan ???

    by : Arif Maulana

    ReplyDelete
  4. Izin praktekin tutorialnya gan, kebetulan lagi ane cari nih :D

    ReplyDelete
  5. wahh :) saya sudah pasang nih Stickynya :-)

    ReplyDelete
  6. salam kenal & happy blogging

    ReplyDelete
  7. wah, keren nih gan. jadinya, widget tetep ada meskipun scrollnya digeser ya, (h)

    ReplyDelete
  8. wiih keren gan..ijin testing dulu :)

    ReplyDelete
  9. Mantap nih gan... saya coba dulu..

    ReplyDelete