Pentingnya sebuah widget pada suatu website tak bisa dianggap remeh. karena dengan memasang widget pada suatu website akan mempermudah pengunjung untuk melihat isi dari website kalian.


Ada banyak widget yang dapat diterapkan pada website kalian. Seperti judul diatas, saya akan membahas Widget Sticky.


Apa itu Widget Stiky ? sama dengan widget pada umumnya, hanya saja Widget Sticky dapat membuat widget tertentu menjadi melayang dan berjalan mengikuti kursor ketika halaman digulirkan kebawah maupun keatas.

Contohnya sendiri kalian bisa lihat pada widget “POST POPULER” pada blog ini.
Tapi sebelum itu, tentukan terlebih dahulu widget yang ingin kalian jadikan sticky. Karena nantinya untuk membuat Widget Sticky diperlukan ID Widget 

Untuk mencari ID widget, kalian bisa ikuti langkah-langkah dibawah ini
1. Buka website atau blog kalian.
2. Kemudian pilih widget mana yang akan kalian lihat IDnya.
3. Sebagai contoh, saya mencari ID dari widget “LABELS“, kemudian klik kanan dan pilih “Inspect”. Jika kalian bingung, silahkan perhatikan tanda merah pada gambar dibawah.

Cara memasang Widget Sticky Pada Blogger
1. Pertama login pada akun blogger kalian.
2. Pada menu yang ada pada sebelah kiri, silahkan pilih “Tema kemudian klik “Edit HTML“.
3. Copy kode dibawah, kemudian tambahkan kode berikut sebelum kode “]]></b:skin>"

 .sticky {position:fixed;top:10px;/* jarak dari atas*/z-index: 100;max-width: 300px;} 

4. Copy kode dibawah, kemudian tambahkan kode CSS berikut sebelum “</body>"

<script type=’text/javascript’>
$(document).ready(function() {
var stickyWidgetTop = $(‘#IDWidget’).offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$(‘#IDWidget’).addClass(‘sticky);
} else {
$(‘#IDWidget’).removeClass(sticky’);
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>

Ganti semua kode #IDWidget dengan ID widget yang akan dibuat menjadi sticky, selesai
Kalian bisa melihat hasilnya

Semoga artikelnya dapat membantu kalian. Sampai jumpa pada artikel selanjutnya.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Name *
Email *
Website