16 September 2015

Cara Membuat Sticky Widget di Sidebar Widget Blog

Cara Membuat Sticky Widget di Sidebar Widget Blog
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 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.

Tentang Penulis

Artikel Terkait

6 komentar

Komentar Sobat yang masuk akan di Moderasi (tinjau) dan Kami proses untuk di Balas.
Terima Kasih untuk tidak Menggunakan SPAM dalam Komentar :)

izin coba gan :D

Silahkan, Semoga bermanfaat :)

terima kasih gan, sebenarnya ane pengin tahu aja sticky widget itu apa, dan sekarang ane jadi tau ...

TETAP GAK BISA

Awesome tutorial,...

Hasil akhirnya gimana ya? bisa ditunjukin tidak? Maaf sebagai pemula saya bingung. Hehehehe

HiStats

Formulir Kontak

Nama

Email *

Pesan *