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!

Labels: Desain Blog
69 Komentar untuk "Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll"

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

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

kok jadi aneh gini gan? :D

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

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

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

berarti ganti .nav dengan #toppic

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

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

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

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

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

bantuin ya gan :)

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

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?

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

kok drop menunya jadi hilang

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

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

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

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

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

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

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,

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

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

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

berhasil gan.

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

mksih

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

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

Coba diubah width: 960px jadi 100%

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

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

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

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

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

kalo pake template mas-sugeng, tanyanya ke sana dong :)

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

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

ane kok gk bis y gan , cob tolong ksi solusinya gan

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

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

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

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

bisa, ya nambah kode di atas itu caranya :)

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

berhasil berhasil gan, thanks agan cibi

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

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

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

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.

thanks gan ane udah coba nih dan langsung berhasil

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

Punya saya kok gk berhasil ya :(

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

coba pake #menu-wrap
atau blm pasang jquery kali

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

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

klik kanan menu navigasi > inspect elements

gan ak bingung , menu ganti apa ?

juragan juga bingung, menu ganti apanya gimana?

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

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

Kalau cara bikin backgroundnya jadi transparan saat di scroll?

Makasih CB.. Alhamdulillah SUkses,. :)

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

Contact Form

Name

Email *

Message *