Home » » Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

sticky menu navigasi blog
Cara menampilkan menu statis, sticky, atau melayang (floating).

KALI ini CB berbagi tentang cara membuat Menu Navigasi blog statis yang tetap muncul (melayang) di bagian atas, saat halaman discroll ke bawah.

Contohnya? Ya... blog ini! Coba scroll ke bawah, lalu lihatlah... menunya tetap ada di bagian atas 'kan?

Menu Navigasi (Navigation Menu) yaitu menu blog yang biasa ada di deretan Home, About, dan seterusnya. Menu navigasi sangat penting bagi pengunjung agar bisa dengan mudah "berselancar" (surf) dan "baca-baca" (browse) blog kita lebih lama.

Awalnya CB "ngiri" sama menu navigasi situs Hongkiat. Saat kita scroll, menunya tetap muncul di atas. Setelah "search" di sana, ternyata Hongkiat berbagi tips cara membuatnya: Sticky Position (Bar) With CSS Or JQuery.

CB hanya ambil kodenya saja agar Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll. Cara membuatnya mudah banget.

Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

1. Template > Edit HTML
2. Cari (CTRL+F) kode </body>
3. Copy kode berikut ini dan Paste di atas 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>

4. JANGAN LUPA! Sebelum klik "Save", Ganti elemen .nav dengan elemen/kode yang menjadi Navigasi Menu blog Anda. Di blog CB (New Johny Wuss), kodenya bernama #menu, sehingga kodenya menjadi:

<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>

Anda pengguna template New Johny Wuss, yang ingin Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll, tinggal COPAS saja kode yang digunakan CB di atas. Tapi jangan lupa, ubah angka 99% di bagian #menu{background:#343434;width:99%;margin:0 5px 0 5px;color menjadi 950px.

Good Luck dan Happy Blogging!

Thanks for reading & sharing Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

Previous
« Prev Post

67 comments:

Comment Page:
  1. ouya ane kok ga sejajar ya gan ? coba liat blog percobaan ane *nattashanauljamlovers.blogspot.com*
    mohon bantuannya gan

    ReplyDelete
    Replies
    1. itu karena di element #menu, lebar (width)-nya 100%, coba ubah angka 100% itu menjadi 980px

      Delete
    2. Mantap gan templatenya, saya pake di www.3fors.biz ya gan, mau tanya gan, yg menu navigasinya kalo di buka pake android kok ga muncul ya. Punya agan yg blog ini juga. Gimana gan ada solusi?

      Delete
    3. Menu Navigasi ada di "Navigasi", klik aja....

      Delete
    4. wah gan, rada bingung nih.
      mau tanya nih... kalau di blog ane nih .nav nya diganti apa yah?
      www.inspirasimuda.tk mohon maap kalau ganggu nih,

      Delete
    5. udah saya ganti jadi px, tapi kok malah yang di versi mobile jadi panjang banget

      Delete
  2. kok jadi aneh gini gan? :D

    ReplyDelete
  3. alhamdulillah tutorial ini sukses di blog saya gan.. jazakumullahu khoiro

    blog saya -> http://TektenaTokoOnline.blogspot.com/

    ReplyDelete
  4. oia gan ganggu lagi ane :)

    kalo navigasinya kaya gini

    #toppic {width:910px;height:auto;background:#ff0000;border-top:0 solid #a60606;margin:0 auto;padding:0;overflow:hidden;}
    #topwrapper {width:910px;height:auto;margin:0 auto;padding:0}
    .clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
    #top {width:100%;}
    #top, #top ul {padding: 0;margin: 0;list-style: none;}
    #top a {border-right:0 solid #a60606;border-left:0 solid #ccoooo;text-align:left;display: block;text-decoration: none;padding:13px 13px 13px;font:12px Arial;text-transform:uppercase;color:#ffffff;}
    #top a:hover {background:#a60606;}
    #top a.trigger {background-image: url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat: no-repeat;padding: 6px 26px 8px 12px;background-position: right center;}
    #top li {float: left;position: relative;}
    #top li {position: static; width: auto;}
    #top li ul, #top ul li {width:240px;}
    #top ul li a {text-align:left;padding: 6px 10px;font-size:13px;font-weight:normal;text-transform:none;font-family:Arial, sans-serif;text-transform:uppercase; border:none;}
    #top li ul {z-index:100;position: absolute;display: none;background-color:#a60606;margin-left:-60px;padding:10px 0;-moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:0; -webkit-border-bottom-left-radius:0; -webkit-border-bottom-right-radius:0; border-bottom-left-radius:0; border-bottom-right-radius:0;-moz-box-shadow:0 0 0 rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
    #top li ul li {width:120px;float:left;margin:0;padding:0}
    #top li:hover ul, #top li.hvr ul {display: block;}
    #top li:hover ul a, #top li.hvr ul a {color:#ffffff;background-color:transparent;text-decoration:none;}
    #top ul a:hover {text-decoration:underline!important;color:red}


    gimana Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll gan? :)

    sorry ya gan,saya ganggu mulu :)

    ReplyDelete
    Replies
    1. berarti ganti .nav dengan #toppic

      Delete
  5. terimakasih gan :) saya sudah ngerti sekarang :)

    request dong gan cara membuat slider dg bxslider (saya sudah hosting gan tapi ga tau yg mana yg akan di panggilnya dan cara meletakkannya di blogger :)

    edi efendi

    ReplyDelete
    Replies
    1. Slider gak bagus buat SEO. Baca > http://contohblognih.blogspot.com/2014/05/featured-content-slider-seo-blog.html

      Delete
    2. saya sudah baca artikelnya dr kemaren ,dan saya sudah tau gan :) tapi saya sangat perlu ni gan

      bantuin ya gan :)

      Delete
  6. aduh bos tolong di kasih tiap kasih kasih kode ya karena odenya 2 jadi yang kit amasukan ini kode yang bawah apa atas siha,,,, mksih

    ReplyDelete
    Replies
    1. pake kode pertama, di nomor tiga...... ganti dulu huruf yang warna merah (.nav) dengan elemen sejenis (menu navigasi) yang ada di template Anda...

      Delete
  7. maaf ni gan saya ganggu lagi

    apa yg salah ya sama menunya template saya? mohon pencerahannya gan ): (alamatnya masih sama dg yg diatas)

    thanks before :)

    ReplyDelete
  8. kok drop menunya jadi hilang

    ReplyDelete
  9. nagigasinya jadi berantakan gan, gmna ya, coba lihat trovustar.blogspot.com

    ReplyDelete
    Replies
    1. udah dibenerin ya, CB lihat udah oke navigasi melayangnya bagus.... Congratz!

      Delete
  10. udah gan, sipp..
    oh ya ada tutorial bikin menu di footer ga kya d blog ini,,,

    ReplyDelete
    Replies
    1. http://contohblognih.blogspot.com/2014/05/Cara-Membuat-Widget-Footer-Empat-Kolom-di-Blog.html

      Delete
  11. mantap sob tutornya, udah bisa. coba deh dicek gan, hhaha. makasih.

    ReplyDelete
  12. punya q kalau di scroll menunya berubah jadi vertikal, itu gmana ya ?

    ReplyDelete
  13. terima kasih banyak infonya.saya sudah praktek nih.
    ilmudes.blogspot.com

    ReplyDelete
  14. super sekali nie infonya, dan langsung saya praktekan di blog ane

    coba liat gan klinikandroid.com . kurang apa ya gan itu ? mksih

    ReplyDelete
  15. berhasil gan.

    gan kalau bikin widget kanan tetap melayang saat di scrool tutornya gmna. kaya nya dulu blog CB widget kanan nya gitu...

    mksih

    ReplyDelete
  16. patut di cobaa nih mas..trimss infonya,,,

    ReplyDelete
  17. terima kasih masta triknya udah berhasil saya terapakan, tapi yang menjadi permasalahan kenapa menu navigasi nggak muncul tepat ditengah ya ketika di scroll kebawah tapi malah muncul disamping kiri, mohon pencerahanya masta

    ReplyDelete
    Replies
    1. Coba diubah width: 960px jadi 100%

      Delete
    2. berhasil masta tapi gantian kenapa seluruh content ikut miring ya, ada solusi lain nggak masta?

      Delete
  18. blom ngerti saya gan, cara nambahin tulisan/menu navigasinya gmana??

    ReplyDelete
    Replies
    1. lihat panduan templatenya, ada yang tinggal nambah di Layout, ada juga harus ke dalam template: template > edit html > cari menu "home"

      Delete
  19. trimakasih mas,,, tapi di blog saya saat di scrol yang tetep di atas tulisan menunavigasinya aja,tapi warnanya tidak ada , hanya tulisan

    ReplyDelete
  20. Di blog saya kalau pakai ini bisa, tapi saat discrool warnanya gak keliatan,. Ada solusi kang CB ?

    ReplyDelete
    Replies
    1. kalo pake template mas-sugeng, tanyanya ke sana dong :)

      Delete
  21. keren mas... tapi kalo navbarnya dipasang adsense ga apa-apa nih mas? ga melanggar ketentuan adsense?

    ReplyDelete
  22. mohon pencerahannya ya bang ini kok gak bisa ya hehehe
    himapgsdunnessemarang.blogspot.com

    ReplyDelete
  23. ane kok gk bis y gan , cob tolong ksi solusinya gan

    ReplyDelete
  24. mantap, ini nih yang ane cari-cari, izin install ke template ya gan, makasih :)

    ReplyDelete
  25. Mudah di praktekkan ternyata, udah saya coba di blog saya dan berhasil. Terimakasih ilmunya sangat bermanfaat :)

    ReplyDelete
  26. @ All, sama-sama [jawaban bagi komentar terim kasih yang belum dijawab :) ]

    ReplyDelete
  27. Kalau kita sudah punya menu, terus mau dibikin melayang, bisa ga tinggal nambahin apa gitu ? :)

    ReplyDelete
    Replies
    1. bisa, ya nambah kode di atas itu caranya :)

      Delete
  28. gan saya buat menu dari widget pages, itu bisa ga dibikin melayang??? trus gmn nyari kodenya?? mohon bantuannya,,,,makasih.

    ReplyDelete
  29. berhasil berhasil gan, thanks agan cibi

    ReplyDelete
  30. Agan cibi, diblog ane berhasil tapi pas turun ukuran lebar tambah kecil. Ada solusi?

    ReplyDelete
    Replies
    1. margin nya disesuaikan dulu. tiap template kan beda-beda. ada yg 99% dan ada yag 100%. diubah ke px. misalkan jadi 950px

      Delete
  31. pas di homepage kenapa sticky featurenya gk work ya, cuma di postingan aja

    ReplyDelete
  32. Sukses mas CB. Awalnya sya bingung krn waktu sya test dan sya scroll kebawah posisi sticky kepanjangan disebelah kanan. Ternyata sya lupa ngasih ngasih keterangan px pada 950 nya.

    ReplyDelete
  33. thanks gan ane udah coba nih dan langsung berhasil

    ReplyDelete
  34. awalnya ok, tetapi setelah di perhatikan kayaknya ada yg salah mas,menu saya kalau di tarik ke bawah pada saat loding, stickynya tdk berfungsi.

    ReplyDelete
  35. Punya saya kok gk berhasil ya :(

    ReplyDelete
  36. Om CB tolong dong bantuannya, saya sudah ikuti triknya tpi msih blum berhasil. walaupun sudah gnti .nav menjadi #menu karena blog sama hmpir sama sma om CB. mohon bantuannya om CB. ini blog sya om >>hendrik.id

    begini tampilan menu sya om.

    /* CSS Main Menu */
    #menu-wrap {background:#222;height:50px;margin:0 20px;position:relative;border-bottom:4px solid #ef4836;}
    #menu, #menu ul {margin:0;padding:0;list-style:none;}
    #menu ul{height:50px}
    #menu {background:#222;color:#fff;height:50px;}
    #menu:before,#menu:after {content:"";display:table;}
    #menu:after {clear:both;}
    #menu li {float:left;display:inline;position:relative;font-family:'Ruda';font-size:14px;font-weight:700;text-transform:uppercase;margin:0;}
    #menu a {display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#fff;
    transition:all 0.2s ease-out;}
    #menu li:hover > a {background:#333;color:#fff;}
    #menu ul {margin:20px 0 0 0;visibility:hidden;opacity:0;height:auto;min-width:150px;background:#fff;position:absolute;z-index:99;top:50px;left:0;
    box-shadow:0 4px 5px -2px rgba(0,0,0,.2);transition:all 0.2s ease-out;}
    #menu li:hover > ul {opacity:1;visibility:visible;margin:0;}
    #menu ul ul {top:0;left:150px;margin:0 0 0 20px;box-shadow:0 4px 5px -2px rgba(0,0,0,.2);}
    #menu ul li {display:block;width:100%;font-family:'Droid Sans';font-size:13px;font-weight:400;text-transform:none;}
    #menu a.ai{padding:0 27px 0 14px;}
    #menu li > a.ai::after {content:"\f107";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:50px;position:absolute;top:0;right:10px;color:#aaa;transition:all 0.2s ease-out;}
    #menu li > a.ai2::before,#menu li > a.ai3::before {content:"\f105";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:50px;position:absolute;top:0;left:10px;color:#ccc;transition:all 0.2s ease-out;}
    #menu li > a.ai:hover::after,#menu li > a.ai2:hover::before,#menu li > a.ai3:hover::before{color:#fff;}
    #menu ul a {padding:0 20px 0 25px;background:#fff;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all 0.2s ease-out;}
    #menu ul a:hover {background-color:#ef4836;color:#fff;}
    #menu ul li:first-child > a:after {content: '';position:absolute;left:20px;top:-6px;
    border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;transition:all 0.2s ease-out;}
    #menu ul ul li:first-child a:after {left:-6px;top:50%;margin-top:-6px;border-left:0;
    border-bottom:6px solid transparent;border-top:6px solid transparent;border-right:6px solid #fff;transition:all 0.2s ease-out;}
    #menu ul li:first-child a:hover:after {border-bottom-color:#ef4836;}
    #menu ul ul li:first-child a:hover:after {border-right-color:#ef4836;border-bottom-color:transparent;}
    .no-transition {transition:none;opacity:1;visibility:visible;display:none;}
    #menu li:hover > .no-transition {display:block;}
    #menu .homers {line-height:50px;margin-left:20px;}
    #menu .homers a{background:#ef4836;color:#fff;padding:0 15px;}
    #menu .homers a:hover{background:#f55847;color:#fff;}
    #menu .homers .fa.fa-home{text-align:center;color:#fff;}
    #menu-wrap input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer;}
    #menu-wrap label{font-family:'Ruda';font-size:30px;font-weight:700;text-transform:uppercase;display:none;width:35px;height:51px;line-height:51px;text-align:center;}
    #menu-wrap label span{font-size:13px;position:absolute;left:35px}
    #menu li.ranpost {cursor:pointer;float:right;}
    #menu li.ranpost a{padding:0 18px;font-size:16px;line-height:50px;}

    ReplyDelete
  37. coba pake #menu-wrap
    atau blm pasang jquery kali

    ReplyDelete
  38. pengen ini.. kasih tau gimana aku tau kode navigasi menunya, mas????? akunya baru di blogger, ngga ngerti :D

    ReplyDelete
    Replies
    1. klik kanan menu navigasi > inspect elements

      Delete
  39. gan ak bingung , menu ganti apa ?

    ReplyDelete
    Replies
    1. juragan juga bingung, menu ganti apanya gimana?

      Delete
  40. Min kalo biar tidak muncul gimana? saya pake template johny wuzz 3

    ReplyDelete
  41. gan navigasi menu 2 di template ane kan ada box search nya di samping, nah pas di scroll yg box search ikut ter seret, jadi navigasi menu yg melayang cuma spotong, gimana tuh gan ngatasinyam
    makasih

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox