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



  1. login blogger >> template >> edit html
  2. 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>


  1. 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>



Comments

  1. tes emot :2thumbup :iloveindonesia

    ReplyDelete
    Replies
    1. widiih... aq kalah pertamax nih ama Admin blog nya.. :D hehehe :D

      Delete
    2. hehehe tetep agan yang pertamax :thumbup

      Delete
  2. udah mulai aktif lagi nih blognya :D

    ReplyDelete
  3. mantap gan tutornya, berhasil nih ;)

    ReplyDelete
  4. waaah makasih ya tips nya,, trus kalo mau nambahin posisi konten yg melayang gimana ni??

    ReplyDelete

Post a Comment

Silakan berkomentar dengan sopan sesuai dengan topik bahasan.
Komentar dengan menyertakan tautan hidup akan otomatis terhapus.