Cara Membuat Widget Sticky
Membuat sebuah blog terlihat elegant pastilah sangat diinginkan oleh para pengelolanya. Menempatkan widget yang secara khusus ditempat yang spesial dan dapat dilihat terus menerus bisa teman-teman lakukan. Misalnya kalian memiliki banner atau widget yang ingin terus muncul walaupun halaman di scroll ke tempat paling bawah. Sehingga pengunjung bisa terus melihat widget yang berada di sidebar itu dan pastinya secara tidak langsung akan menarik perhatiannya.
Nah, kali ini saya akan memberikan tutorial agar widget yang berada di sidebar akan mengikuti scroll hingga bagian paling bawah. Contohnya bisa kalian lihat seperti sidebar yang ada pada blog ini. Perhatikan dan ikuti langkah di bawah ini.
Langkah-Langkah Membuat Widget Sticky:
- Login ke akun blogger kalian.
- Masuk pada menu Template/Tema.
- Pilih Edit Html.
- Kemudian tekan tombol Ctrl+F untuk mencari code ini " </body> ".
- Jika sudah ditemukan, copy script dibawah ini dan paste di bagian atas code " </body> ".
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<SCRIPT>
$(document).ready(function() {
var div = $('#YOUR_WIDGET_ID');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});
});
</SCRIPT>
- Simpan template dan coba lihat hasilnya di blog kalian.
Catatan: Ganti tulisan yang berwarna merah dengan code widget yang ada pada blog kalian.