Cara Membuat Menu Sticky Widget (Widget Melayang)

Setelah bisa Membuat Sitemap atau Daftar Isi Blogspot kini kita lanjutkan lagi tutorial membuat Sticky Widget (Widget Melayang).

Menu Sticky Widget (Widget Melayang) bertujuan memudahkan visitor untuk menjelajahi isi blog tanpa harus naik turun scroll. Sticky Menu awalnya akan terlihat normal, tetapi akan melayang (fixed) ketika mouse discroll ke bawah .

Cara dibawah ini berlaku untuk semua widget atau elemen di blogspot yang memiliki ID, dan sangat cocok jika diaplikasikan untuk menu navigasi.

Membuat Menu Sticky Widget (Widget Melayang) :

1. Log in ke blogger anda

2. Template
3. Edit HTML
4. Masukkan script dibawah ini tepat di atas kode </body>

<script>
// Sticky widget
//<![CDATA[
bs_makeSticky("ID_WIDGET");
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>

5. Tempatkan kode CSS ini tepat diatas ]]></b:skin>

.bs_sticking {background:#f2f2f2; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}

6. Kemudian save template

Catatan :

• Ganti baris "ID_WIDGET" dengan ID widget yang ingin jadi Sticky Widget.
• Sesuaikan kode CSS dengan widget yang akan dijadikan Sticky Widget (Widget Melayang)

Selamat mencoba semoga berhasil.