Ini nih yang lagi ngetrend-ngetrendnya di blogger, yaitu tampilan menu navigasi yang kalau setiap kali blog di scroll ke bawah, pasti menu navigasinya akan tetap muncul atau melayang. Berkat blogwalking ke blog atau website sana sini yang menampilkan menu navigasinya seperti itu, saya jadi kepengen untuk mencobanya juga di blog saya ini. Dan alhamdulillah akhirnya berhasil dan tampilan blog menjadi lebih dinamis (kalau menurut saya). Bisa dilihat kan kalau menu navigasi di blog saya ini selalu ada dan melayang kalau setiap kali discroll ke bawah, hehehe...

Oke-oke, saya akan dengan senang hati membagikan cara mudahnya.

Pertama kita klik menu laman "Template" di dasbor Blogger.

Jika laman template telah muncul, kemudian klik "Edit HTML".

Di fitur Edit HTML ini, kita akan menambahkan script kode di bawah ini ke dalam template blog yang kita miliki. Pasang script kode berikut ini tepat di atas atau sebelum kode "</body>".

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('.nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.nav').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Setelah itu, kita cari script kode atau elemen menu yang ada di template kita, yang letaknya biasanya di atas atau sebelum kode "]]></b:skin>". Kode menu itu biasanya diawali dengan kata seperti ".nav" atau "#nav" bisa juga "#menu". Pada setiap template, kode atau elemen menu itu bisa berbeda-beda. Kalau di template saya memakai kode "#nav". Jika sudah ketemu, maka kita ambil awalan dari kode atau elemen menu tersebut, kalau di template ini memakai "#nav", maka saya menggunakan "#nav" itu untuk mengganti kode ".nav" yang ada di script kode yang telah kita pasang di atas kode "</body>" tadi.

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#nav').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Jika sudah kita ganti, berarti tinggal kita "simpan" dan lihat hasilnya. 

Itulah langkah-langkah singkat dalam pembuatan menu navigasi ini. Jika ada pertanyaan atau kebingungan, bisa kamu tuliskan di komentar disqus di bawah artikel ini. Semoga berhasil dan bermanfaat... :)