Cara Membuat Sticky Widget Sidebar Di Blog

Membuat Efek Sticky widget Di Sidebar, Apa pernah kalian mampir di sebuah blog dan mendapatkan widget di blog itu ada bagian element atau widgetnya ketika kamu melakukan scroll kebawah pada halaman/page widget tersebut diam/tertahan, itulah maksud dari pembahasan kita kali ini.

Baca Juga:

• Cara memasang widget perlabel di blog
• Membuat multi widget di blog

Pada kesempatan kali ini saya akan berbagi tutorial yang saya rangkum dari berbagi sumber untuk membuat sticky widget pada sidebar.

• Demo
• Download

#Cara Membuat Sticky Widget Di Sidebar

1. Masuk blog kamu.
2. Pilih Edit HTML template blog.
3. Cari kode </body> dan letakkan kode yang ada di bawah ini tepat di atas </body>.

<script>
//<![CDATA[
bs_makeSticky("Letakkan kode, ID Widget yang mau di Sticky");
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.bs_sticking {position:fixed; top:0; z-index:9999;}
</style> 

sumber kode seocips.com

Sebelum save, Kamu harus menggati tulisan warna merah sesuai ID Widget yang mau di buat sticky.
4. Simpan/Save dan lihat hasilnya.

Sekian tutorial membuat efek sticky widget di sidebar, Semoga bermanfaat.

Diposkan oleh Unknown