Cara Membuat Widget Naik Turun Mengikuti Scroll Bar

CARA MEMBUAT WIDGET TURUN DAN NAIK MENGIKUTI SCROLL BAR
account_circle POSTED BY ALUNG GOPAL label LABEL : BLOGGER , TIPS BLOGGER , WIDGET BLOG
date_range ON : 4/26/2014
Setelah saya berkunjung ke Website +Kang Ismet saya melihat widget-nya yang turun ketika scroll bar digulir ke-bawah nah pada saat itu saya terinspirasi untuk menggunakan efek yang sama menggunakan JavaScript. Seperti dibawah ini penampakannya

contoh

Kamu juga bisa lihat Demonya seperti pada sidebar blog ini. Untuk pemasangannya sangat mudah karan hanya menggunakan JavaScript, ikuti langkah  dibawah ini untuk pemasangan.

Langkah Pertama#


Kamu harus tahu id widget mana yang kamu yang inginkan untuk menggunakan efek ini.
#contoh id widget seperti di gambar di bawah ini
contoh2
jadi id widget nya ditulis pada javascript seperti ini "#HTML1"
Langkah Kedua
Setelah kamu mengetahui id widgetnya, kamu tinggal copas kode JavaScript di bawah ini. Letakan kode diatas ini, diatas kode </head>,

<script type='text/javascript'>
//<![CDATA[
$(function () {
    var offset = $("#HTML1").offset();
    var topPadding = 0;
    $(window).scroll(function () {
        if ($(window).scrollTop() > offset.top) {
            $("#HTML1").stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding
            })
        } else {
            $("#HTML1").stop().animate({
                marginTop: 0
            })
        }
    })
});
        //]]>
</script>



Langkah Ketiga
Ganti kode "#HTML1" dengan kode widget yang kamu ingin gunakan pada Langkah Pertama.

Langkah Keempat
Simpan Template :D.

Sekian dulu... ya, Semoga bermanfaat.

NB: efek dari javascript ini saya ambil dari KOMPI AJAIB.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: