Monday, January 1, 2018

Cara Membuat Sticky Widget Disidebar Blog

ASSALAMUALAIKUM WR WB

Cara Membuat Sticky Widget Disidebar Blog - Pernahkah anda mendengar kata "Sticky Widget" dan pastinya anda juga sering melihat ini tetapi belum tau untuk lebih jelasnya, apa kegunannya dan bagaimana cara memasangnya. mari simak pembahasan lengkapnya dibawah ini.

Cara Membuat Sticky Widget Disidebar Blog

Sticky Widget Adalah widget yang menempel pada blog apabila kita scroll kebawah akan selalu mengikuti tampilan monitor dengan batas yang sudah ditentukan dan jika kita scroll ke awal widget ini juga berubah seperti semula. biasanya sticky widget ini dipasang pada bagian tertentu seperti sidebar dan heander.
(Baca Juga: Cara Membuat Iklan Page Ads Level)
kegunaan wiget ini ialah untuk mempermudah pengunjung untuk melihat  artikel tebaru yang berada pada bagian sidebar, sehingga jika pengunjung ingin membuka lembali melihat artikel yang berada pada sidebar tidak perlu bersusah payah scroll keatas karena otomatis artikel sudah berada diesamping.
(Baca Juga : Cara Memilih Tema Blog Yang Benar)
apakah anda tertarik ingin segera memasangnya silahkan ikuti langkah - langkahnya dibawah ini.

#Cara Membuat  Sticky Widget

  • login ke akun blogger > pilih tema > edit html. 
  • tambahkan kode dibawah ini sebelum kode </body>
 <script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sidebar-wrapper').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    var el = $('#sticky-sidebar');
    var stickyTop = $('#sticky-sidebar').offset().top;
    var stickyHeight = $('#sticky-sidebar').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Keterangan : ganti "#sticky-sidebar" dengan ID seperti #sidebar1, 2, 3 dan 4 sesuaikan mana yang akan anda jadikan sticky widget.

  • simpan dan lihat hasilnya

(Bca Juga : Cara Membuat Breaking News Diblog)
itulah Cara Membuat Sticky Widget Disidebar Blog mudah bukan dan selamat mencoba .


WASSALAM

ATURAN KOMENTAR :

1. dilarang komentar berbau sara, perjudian dan parno.
2. silahkan berkomentar sesuai tema dengan sopan.
3. selalu menjaga kenyamanan sesama pengunjung.
4. Dilarang spam dan jika mau jadi partner bisa hubungi melalui link partner.
EmoticonEmoticon