Cara Membuat Sticky Widget di Sidebar Widget Blog

Murli Mirza    9/16/2015    Blogger    Comment   

Cara Membuat Sticky Widget di Sidebar Widget Blog - Hai bloggers, pada kesempatan kali ini saya akan membagikan sebuah tutorial Membuat Sticky Widget, mungkin dari kalian ada yang tidak tau apa itu sticky, nah sticky widget itu adalah widget blog yang di desain atau di modif sehingga akan tampak melayang atau biasa disebut widget on top yang selalu berada ditengah walaupun sudah kita scroll kebawah.

Biasanya para blogger menggunakan sticky widget ini untuk menampilkan iklan agar selalu tampil, jika kalian mencari tutorial ini maka sudah bertebaran di blog luar tapi tidak salahnya saya membahas ulang.

Baca Juga :

• Cara Mudah Daftar dan Menghasilkan Uang dari KlikSaya.com 
• Cara Menghilangkan Icon Obeng Tang Quick Edit di Blog 
• Cara Mudah Memasang Emoticon Kaskus pada Komentar Blog

Cara Membuat Sticky Widget di Sidebar Widget Blog

1. Pertama buka dashboard Blogger > Template > Edit HTML.
2. Copy dan pastekan kode dibawah ini diatas kode ]]></b:skin>.

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

3. Kemudian Taruh kode script ini diatas kode </body>. Kode yang berwarna merah dibawah ini kalian ganti dengan jenis widget yang akan di jadikan sticky.

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

Jika kalian merasa bingung dengan tutorial diatas, maka alternatif lainnya adalah dengan meng-copy script dibawah ini dan taruh ke dalam widget blog kalian dengan cara buka Dashboard > Tata Letak > Tambahkan Gadget > pilih HTML/JavaScript. Kode yang berwarna merah dibawah ini kalian ganti dengan jenis widget yang akan di jadikan sticky.

<style>
 .sticky {
   position:fixed;
   top:10px;
   z-index: 100;
 }
</style>
<script type='text/javascript'>
  $(document).ready(function() {
  var stickyWidgetTop = $('#HTML8').offset().top;
  var stickyWidget = function(){
  var scrollTop = $(window).scrollTop();
  if (scrollTop > stickyWidgetTop) {
    $('#HTML8').addClass('sticky');
  } else {
    $('#HTML8').removeClass('sticky');
  }
  };
  stickyWidget();
    $(window).scroll(function() {
  stickyWidget();
  });
  });
</script>

Sticky widget ini banyak fungsinya, salah satunya seperti yang saya tulis diatas yaitu untuk menampilkan iklan agar selalu terlihat walaupun sudah di scroll, tapi saya menyarankan untuk menaruh sticky widget ini di sidebar paling bawah karena jika menaruhnya diatas maka widget yang berada dibawahnya akan tertutup oleh sticky ini.

Itulah tutorial mengenai cara Cara Membuat Sticky Widget di Sidebar Widget Blog, jika kalian merasa kesulitan atau bingung jangan malu-malu untuk menanyakan melalui kolom komentar dibawah, selamat berkreasi.