Cara Mudah Membuat Sticky Widget Pada Sidebar Blog Baru

Kali ini saya akan bagi tips buat khususnya para blogger yaitu Cara Membuat Sticky Widget Pada Sidebar Blog, dengan memasang sticky widget ini sidebar/widget tertuntu yang kita inginkan dapat melayang mengikuti halaman yang di gulirkan kebawah maumun keatas, namun apabila anda kwatir jika widget yang anda buat melayang bertumpuk dengan footer blog anda, jangan kwatir karna jquery sricky ini akan berhenti di atas footer dan juga kita bisa mengatur jarak atas layar widget anda dan jarak berhentinya widget ketika sampai di footer blog anda. dan jika anda tertarik silahkan mencobah atau mengunakan jquery sricky widget di bawah ini

Silahkan copy dan simpan jqury di bawah ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Sticky
$(function() {
    if ($("#HTML3").length) { 
        var o = $("#HTML3"),            t = $("#HTML3").offset().top,
            i = $("#HTML3").height();
        $(window).scroll(function() {
            var s = $("#footer").offset().top - i - 20, // Sesuaikan jarak berhenti di atas footer
                f = $(window).scrollTop();
            if (f > t ? o.css({
                    position: "fixed",
                    top: 20 // Sesuaikan jarak atas layar
                }) : o.css("position", "static"), f > s) {
                var n = s - f;
                o.css({
                    top: n
                })
            }
        })
    }
});
//]]>
</script>

Keterangan :
#HTML3 : Ganti ID #HTML3 dengan ID widget yang ingin anda buat melayang
#footer ; Ganti sesuai dengan ID footer anda

Setelah itu tambahkan kode CSS ini untuk mengatur lebar widget ketika melayang

#HTML3{width:100%;max-width:320px}

dan jika template anda menampilkan widget responsive lebarnya 100% atau melewati batas dari css yang di atas, maka tambahkan script seperti contoh di bawah ini

@media only screen and (max-width:768px){
#HTML3{width:100%;max-width:100%;}
}

Mungkin sudah cukup dari saya, semoga anda paham dan sekian dari saya, semoga berhasil

Tweet