Apa itu Widget Sticky & Cara Memasangnya Pada Blogger
Thursday, May 2, 2019
Add Comment
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.
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$(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>
Kalian bisa melihat hasilnya
Semoga artikelnya dapat membantu kalian. Sampai jumpa pada artikel selanjutnya.
0 Response to "Apa itu Widget Sticky & Cara Memasangnya Pada Blogger"
Post a Comment