Blog Personal tentang tips Blogging dan Internet Marketing

Cara Membuat Sticky Widget Pada Sidebar

Pada blogger tips yang lalu telah dibahas bagaimana cara membuat dan memasang sticky widget pada Menu Navbar. Kali ini akan dibahas cara membuat dan memasang sticky widget pada Sidebar. Dengan menggunakan fungsi JQuery untuk menetapkan sidebar mana yang akan dikenakan fungsi sticky

Cari kode </body> jika sudah ketemu, letakkan kode di bawah ini sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
$(function() {
  var top = $('#sidecontent').offset().top - parseFloat($('#sidecontent').css('marginTop').replace(/auto/, 0));
  var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

  var maxY = footTop - $('#sidecontent').outerHeight();

  $(window).scroll(function(evt) {
    var y = $(this).scrollTop();
    if (y > top) {
      if (y < maxY) {
        $('#sidecontent').addClass('fixed').removeAttr('style');
      } else {
        $('#sidecontent').removeClass('fixed').css({
          position: 'absolute',
          top: (maxY - top) + 'px'
        });
      }
    } else {
      $('#sidecontent').removeClass('fixed');
    }
  });
});
//]]>
</script>

tulisan yang berwarna merah merupakan ID yang akan dikenakan fungsi sticky, Anda bisa menggantinya sesuai dengan ID pada template masing-masing.

Kemudian cari kode ]]></b:skin> jika sudah ketemu, letakan kode di bawah ini sebelum kode ]]></b:skin>

#sidecontent {
  width: 255px;
  height: 200px;
  margin: auto;
  background: #fc4f3f;
  position: absolute;
}
#sidecontent.fixed {
  position: fixed;
  top: 20px;
}

tulisan yang berwarna merah merupakan ID yang akan dikenakan fungsi sticky, sedangkan tulisan yang berwarna kuning merupakan atribut untuk mengatur ID yang dikenakan fungsi sticky agar tidak ikut bergulir saat halaman digulirkan kebawah. 20px merupakan jarak antara navbar dengan sidebar, ini bisa disesuaikan pada template masing-masing.

Selesai, lalu simpan Edit HTML tadi dan lihat hasilnya.


Ayo Like Facebooknya
Tag : Blogging

Share this:

Share this with short URL: Get Short URLloading short url

Berlangganan :
Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari langsung di pesan kotak masuk.

feedburner


Anda telah membaca artikel :
Cara Membuat Sticky Widget Pada Sidebar
Semoga bermanfaat, Terima kasih.
Cara style text di komentar Disqus:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

Tidak ada komentar

Back To Top