Cara Membuat Widget Agar Melekat/Sticky Di Sidebar Blog
Widget yang sticky ini akan selalu melekat di sidebar/pinggiran blog ketika halaman sedang di scroll kebawah, memberikan tampilan yang berbeda dengan blog-blog pada umumnya.
Sticky widget ini juga bisa sobat isi dengan salahsatu gadget pilihan sobat, entah itu widget facebook fanspage, widget follower, atau yang lainnya. Tinggal tentukan saja, apa yang akan sobat taruh dan menjadikannya sebagaiSticky widget.
Pembuatannya juga sangatlah mudah, sobat hanya perlu menyimpan sebuah kode ccs dan kode script kedalam template blog.
Maka tak akan sampai dalam hitungan menit Sticky widget ini sudah terpasang dan menghiasi halaman blog sobat. Tertarik untuk mencobanya sob? Silahkan ikuti tutorial singkatnya berikut ini.Klik DEMO untuk melihat hasilnya
CARA MEMBUAT WIDGET AGAR MENJADI STICKY DI SIDEBAR BLOG
Seperti biasanya 'login' ke dalam dasbor blog. Kemudian pilih 'template' lalu pilih lagi 'Edit html'. Setelah terbuka keseluruhan kode html, kemudian simpan (copy dan pastekan) kode berikut ini tepat diatas kode ]]></b:skin>
.sticky { position:fixed; top:10px;/* jarak dari atas*/ z-index: 100; }
Selanjutnya terserah sobat apakah mau langsung di save atau tidak, karena masih ada satu kode lagi yang harus anda simpan. Langkah selanjutnya simpan lagi kode yang ada dibawah ini tepat diatas kode </body>
<script type='text/javascript'> $(document).ready(function() { var stickyWidgetTop = $('#idgadget').offset().top; var stickyWidget = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyWidgetTop) { $('#idgadget').addClass('sticky'); } else { $('#idgadget').removeClass('sticky'); } }; stickyWidget(); $(window).scroll(function() { stickyWidget(); }); }); </script>
Harap diperhatikan agar sobat mengganti ketiga tulisan yang tercetak warna merah tersebut dengan id gadget yang telah sobat pilih. Untuk mengetahui id gadgetnya silahkan perhatikan gambar dibawah ini.
Terakhir pilih 'simpan Template' sebagai tanda pengerjaan Cara Membuat Widget Agar Melekat/Sticky Di Sidebar Blog sudah selesai.(cerita-ngeblog)