Cara Membuat Widget Menempel Ketika Di Scroll

Membuat salah satu widget menempel ketika di scroll - Kali ini saya akan membagikan cara membuat widget menempel / Sticky widget di blog. Cara ini tidak sulit, hanya menambah 2 kode di dalam template. Membuat efek Sticky pada salah satu widget ini bertujuan untuk memudahkan pengunjung jika ingin menekan tombol pada widget blog kamu sekaligus mempercantik dan memperindah blog.
Bagi yang ingin membuat menu navigasi melayang/menempel, Baca : Cara Membuat Menu Navigasi Menempel Saat Di Scroll.

Hasil gambar untuk sticky widget

Oke, sekarang untuk membuat widget tetap menempel dan melayang di blog. Silahkan ikuti cara-cara berikut ini.

1. Masuk ke blogger
2. Pilih Template lalu Edit Html
3. Cari kode ]]</b:skin> dan letakan kode berikut di atasnya

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


4. Selanjutnya, cari kode </body> dan letakan kode berikut di atasnya

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

*Keterangan : ganti tulisan warna BIRU dengan ID widget kamu. Baca : Cara mengetahui ID widget blog.

5. Setelah itu simpan template dan lihat blog

Sekian artikel kali ini, semoga bisa membawa manfaat. Terima kasih dan selamat berkreasi!

3 Responses to "Cara Membuat Widget Menempel Ketika Di Scroll"

  1. Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
    Jika ya, silahkan kunjungi website ini www.kbagi.com untuk info selengkapnya.

    Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

    ReplyDelete

Hai, Mohon Komentar Yang Relevan Dan Tidak OOT!
Jadilah Top Komentator Dan Mendapat Backlink Gratis Di Blog Ini!

Lihat Top Komentator Disini