Intinya, pergunakan dengan bijak. Jangan sampai widget ini justru memperburuk perfomansi desain website anda.
Nah, untuk membuatnya, saya akan menggunakan plugin jquery bernama jquery lockfixed. Kelebihan menggunakan jquery lockfixed, anda bisa membuat sticky widget dalam jumlah banyak, dengan kode yang sedikit dan hasil yang bagus. Plugin jquery ini juga tidak akan memberatkan karena ukurannya kecil.
Sebenarnya, ada juga cara lain untuk membuat sticky widget ini tanpa menggunakan jquery lockfixed, melainkan dengan javascript murni atau jquery saja. Namun, Kedua cara lain itu harus menggunakan lebih banyak kode & kurang efektif jika anda ingin membuat sticky element lebih dari 1. Jadi, saya gunakan cara ini karena menurut saya lebih simple :D..
Untuk membuatnya silahkan simak kode & tutorial di bawah ini :
<div id=”sticky“>
Disini kode widget yang ingin dibuat sticky..
</div>
Disini kode widget yang ingin dibuat sticky..
</div>
– Kode yang berwarna merah adalah nama id yang akan dijadikan sticky. Anda bisa mengubahnya menjadi kata apapun, asalkan sama dengan kode merah pada Javascript
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<script type=”text/javascript” src=”https://googledrive.com/host/0B5oDbHPeegKrcm9HZnRIaHZDQjA”></script>
<script type=”text/javascript”>
if (screen.width >= 768) {
(function($) {
$.lockfixed(“#sticky“,{offset: {top: 20, bottom: 500}});
})(jQuery);
}
</script>
<script type=”text/javascript” src=”https://googledrive.com/host/0B5oDbHPeegKrcm9HZnRIaHZDQjA”></script>
<script type=”text/javascript”>
if (screen.width >= 768) {
(function($) {
$.lockfixed(“#sticky“,{offset: {top: 20, bottom: 500}});
})(jQuery);
}
</script>
– Kode warna hijau adalah untuk memanggil library jquery. Kebanyakan template blog sudah memilikinya, jadi sebaiknya jangan di sertakan. Kecuali jika template anda belum menambahkan kode tersebut/ sticky widget tidak work
– sticky harus sama dengan nama id pada html
– Kode berwarna biru adalah agar widget hanya sticky pada ukuran layar dengan lebar 768 piksel (layar tablet) atau lebih. Bisa anda sesuaikan sendiri atau hilangkan jika widget tetap ingin sticky pada HP.
– 20 Adalah jarak widget dalam ukuran piksel dengan batas toolbar browser atas
– 500 adalah jarak widget dalam ukuran piksel dengan bagian website paling bawah.
– sticky harus sama dengan nama id pada html
– Kode berwarna biru adalah agar widget hanya sticky pada ukuran layar dengan lebar 768 piksel (layar tablet) atau lebih. Bisa anda sesuaikan sendiri atau hilangkan jika widget tetap ingin sticky pada HP.
– 20 Adalah jarak widget dalam ukuran piksel dengan batas toolbar browser atas
– 500 adalah jarak widget dalam ukuran piksel dengan bagian website paling bawah.
