Tips Membuat Menu Navigasi Blog Agar Tetap Muncul atau Sticky Ketika Di Scroll Ke bawah

Hai sobat blogger, kali ini saya akan membagikan tutorial tentang cara Membuat Menu Navigasi Pada Blog Agar Tetap Muncul saat Pengunjung Blog kita melakukan scrool kebawah pada saat mereka membaca artikel kita. Jadi, menu navigasi kita akan selalu dilihat oleh pengunjung blog kita, sehingga dapat memudahkan mereka mencari tema artikel lainnya. Sebagai contohnya ada pada blog ini sendiri, sobat pasti bisa melihat kan menu navigasi blog ini akan ikut kebawah dan selalu tampil ketika sobat melakukan scroll kebawah. 
Contoh menu navigasi yang mengikuti artikel saat kita scroll artikel blognya kebawah 
Sobat hanya perlu menambahkan kode Javascript pada HTML template kalian, perlu diingat juga apabila sebelumnya sobat sudah pernah melakukan cara ini pada blog kalian (Semisal pada widget Popular Post, Artikel terbaru, dll) yang posisinya berada di sebelah kanan blog sobat, sebaiknya javascript widget tersebut di hapus dulu sob, kenapa kok harus dihapus? Sebab nanti akan membuat penampilan blog sobat berantakan, karena adanya dua kode javascript yang fungsinya sama. 


Sekarang langsung saja kita menuju "Template">"Edit HTML", kemudian cari kode "</body>" menggunakan "CTRL+F" untuk mempermudah pencarian. Setelah ketemu kode "</body>"nya, sobat tinggal Copy kode javascript dibawah ini lalu Paste kan diatas kode "</body>" tersebut:

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

Ingat, sebelum kalian "Save" template kalian, terlebih dahulu ubah dulu kode yang saya beri warna merah "#navi-arlina", sesuai dengan kode yang menjadi Menu Navigasi Blog sobat, untuk cara mencarinya, sobat tinggal manfaatkan jasa pencarian kode melalui "CTRL+F" pada HTML template sobat, lalu ketikkan "main navigation" > "Enter" maka akan muncul beberapa kode Menu Navigasi yang sama, sebagai contohnya lihat gambar dibawah ini:
Kode yang saya beri kotak merah adalah menu navigasi dari template mbak Arlina "Vikka Fast and Responsive Blogger Template", kode menu navigasi berbeda-beda pada setiap template. Jadi, sobat tinggal cari aja Main Navigation nya.
Jika sobat memakai template yang sama dengan yang saya pakai ini, sobat langsung saja Copy kode diatas dan langsung pastekan di HTML template sobat. Oke, mungkin itu saja dulu, jika ada masalah, ataupun pertanyaan, sobat bisa langsung isi komentar dibawah artikel ini. Selamat Mencoba ya sob. Semoga berhasil.

Update: Letakkan kode CSS di bawah ini diatas kode ]]></b:skin> untuk mengatur panjang menu navigasi pada saat melakukan scrool, sesuaikan sampai pas.
#navi-arlina{width:100%;max-width:960px}
#navi-arlina = Sesuaikan dengan ID "main navigation" dari template sobat
960 = Untuk menyesuaikan ukuran menu navigasi template sobat
Comments
8 Comments

8 comments:

  1. mari berkomentar yuk sob jika ada pertanyaan

    ReplyDelete
  2. Sangat suka sama nih blog , soal tutorial untuk edit edit ini template soal nya saya juga user dari template ini , jadi enak buat mau edit nya . Makasih ya mas
    jangan lupa divisit senjata-ngeblog.blogspot.com

    ReplyDelete
    Replies
    1. Terima Kasih banyak mas, saya senang sekali bisa membantu sobat seperti mas yg menggunakan template yg sama dengan saya. Memang si mas, kebanyakan tutorial di blog ini tentang modifikasi template vikka nya mbak arlina, tp mungkin ada sebagian tutorial yg juga bisa diterapkan buat template lain hehe.

      Salam kenal ya mas. Sekali lagi terima kasih sudah berkunjung.

      OTW TKP hehe

      Delete
  3. Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
    Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

    Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

    ReplyDelete
    Replies
    1. Perkenalkan juga, saya huzen, admin dari blog ini. Terima kasih sudah berkunjung di blog saya. Kumpulbagi merupakan jasa hosting yang keren dan sangat user friendly, saya suka sekali, apalagi kemudahan fitur untuk mendownload bermacam file. Saya akan coba memikirkannya dahulu untuk berpindah ke hosting file yang lain. Sekali lagi terima kasih atas infonya ^^

      Delete
  4. Mas Huzen , Mohon Pencerahan donk saya udah nyari id nya ga ketemu ketemu , nama template blog saya New Thesis Seo V3 Mohon di bantu mas :) Salam dari http://ini-remaja.blogspot.co.id Masih newbie hehe

    ReplyDelete
  5. Ass..mas hauzen, sya admin Kolaborasimimpi
    sya masih kurng ngerti, sya udh cari kode navigation nya tpi gak ada mas. Mohon penjelasannya mas..

    ReplyDelete

Silahkan berkomentar sob, dilarang komentar konten pornografi, sara, penipuan, kata kotor, sumpah serapah, dan judi. Terima Kasih