pengen tau: Cara membuat sticky widget sidebar melayang saat di scroll

Wednesday, 4 February 2015

Cara membuat sticky widget sidebar melayang saat di scroll

Cara membuat widget sticky pada sidebar blog - istilah sticky yang kalau diartikan kedalam bahasa indonesia adalah menempel maksud dari menempel adalah widget pada sidebar akan selalu beraada pada posisinya walau mouse sudah di scroll kebawah. widget dengan posisi sticky ini banyak digunakan oleh bloger sebagai widget penarik perhatian karena widget yang telah di kasih posisi sticky tidak akan hilang ketika di scroll down melainkan akan melekat dibawah adress bar blog.

Membuat widget menjadi sticky pada sidebar

untuk penggunaan widget sticky ini tidak terlalu susah karena untuk membuat widget menjadi sticky hanya perlu menambahkan class pada widget yang dipilih

Memasang kode untuk widget sticky

login blogger >> template >> edit html
copy javascript berikut ini kemudian paste diatas kode </body> pada template


<script type='text/javascript'>
      $(document).ready(function(){
    $("#on-top").sticky({topSpacing:0});
      });
    </script>
<script src='https://googledrive.com/host/0B0Dd8XYrtgdDQS03RzFLSmx6RVE/sticky.js' type='text/javascript'></script>

simpan template

Cara menggunakan pada widget

untuk mengaplikasikanya pada widget yang dipilih untuk di buat sticky hanya tinggal menggunakan id dibawah ini tepat sebelum kode widget

<div id="on-top">code widget yang ingin di beri posisi sticky </div>

CONTOH : disini saya akan membuat widget facebook likebox menjadi sticky

<div id="on-top"><div class="fb-like-box" data-href="http://www.facebook.com/depermana12" data-width="290" data-height="182" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false"></div></div>