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!

Labels: Desain Blog

Related Posts

78 Komentar untuk "Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll"

kalau buat agar side barnya tetap nongol saat discroll ada gak tipsnya.

Kalau pengen kaya punya cb gni gmna mas tmplate jonywuzz tulisan navigasinya kebawah dan transparan. Bagaimana kl merubah kaya pnya cb yg ini

Mas itu saya pasang ko menu navigasinya tulisan navigasi nya ke bawah ya bukan sejajar kaya punya cb. Trus transparan lagi

http://www.contohblog.com/2017/07/memperbaiki-tampilan-navigasi-menu-responsive-mobile.html

Punya ane saat di scrool kok cuma tulisannya doang yang tampil, nggak dgn backgrounnya...
Dan di perangkat sellular saat saya klik navigasi tulisannya mengarah ke bawah. Mohon bantuannya...

kalau yang ingin tetap muncul,, misal di blog ini, bagian menu paling atas , yaitu about, kontak dan menu social media sebelahnya , bisa gak?

saya punya masalah saat di skroll ke bawah,, background menunya jadi transparant dan tulisannya menjadi warna putih. bagaimana cara saya mengaturnya. terimakasih sebelumnya

Makasih CB.. Alhamdulillah SUkses,. :)

Kalau cara bikin backgroundnya jadi transparan saat di scroll?

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

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

juragan juga bingung, menu ganti apanya gimana?

gan ak bingung , menu ganti apa ?

klik kanan menu navigasi > inspect elements

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

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

coba pake #menu-wrap
atau blm pasang jquery kali

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

Punya saya kok gk berhasil ya :(

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

thanks gan ane udah coba nih dan langsung berhasil

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.

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

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

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

berhasil berhasil gan, thanks agan cibi

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

bisa, ya nambah kode di atas itu caranya :)

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

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

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

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

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

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

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

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

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

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

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

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

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

Coba diubah width: 960px jadi 100%

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

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

berhasil gan.

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

mksih

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

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

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

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,

bagus itu, unik :)

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

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

thanks gan .. udah bisa

g4download.blogspot.com

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

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

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

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

kok drop menunya jadi hilang

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

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?

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

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

bantuin ya gan :)

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

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

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

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

berarti ganti .nav dengan #toppic

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

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

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

kok jadi aneh gini gan? :D

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

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

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *