Pasang Iklan Anda di Blog Ini?
Gak Ribet, Langsung Nego Posisi
Info Lebih Lanjut [ Kontak Kami]

Cara Membuat Menu Bar Floating pada Blogspot

Menubar merupakan salah satu penunjang pemirsa untuk mengeksplorasi konten konten pada blog Anda. Tampilan menu bar yang menarik tentu sangat membuat para pengunjung mudah untuk mengakses semua artikel dengan kateogri kategori tertentu di blog Anda. Berikut BPO akan memberikan tutorial bagaimana agar menu bar tersebut floating, alias apabila pengunjung scroll blog Anda ke bawah menu bar-nya tetap ikut.

Untuk membuat hal ini gampang kok. Langkah pertama, seperti biasa, masuk akun blogger dan stand by -lah pada HTML Template Editor. Lalu coba ditekan CTRL+F bersamaan dan ketikkan </body>. Jika telah anda temukan. Sisipkan kode berikut ini DIATAS  kode </body> tersebut.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#menu').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#menu').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>
Jika telah dipastekan, Simpan Template Blog Anda dan lihat apa yang terjadi. We did it!. Perlu diperhatikan pastikan template blog Anda seminimalis mungkin. Terutama bagian menubar-nya. Karena jika ukuran menu bar terlalu besar ini akan menganggu pengunjung ketika membaca konten blog Anda. Apalagi jika template yang digunakan mobile friendly.

Pengunaan ini akan membuat ruang artikel untuk tampilan ponsel lebih kecil karena ditimpa menu bar yang selalu muncul. Namun disisi baiknya tentu saja ini merupakan sebuah fitu yang membuat blog Anda tampil semakin elegan.

Loading...