How to : Show/Hide Navbar While Scrolling on a Web Page

Jadi /berdeham/ Ratih tadi tanya itu navibarnya gimana cara bikinya. Karena saya murah hati, jadi mari saya ajari~ ^^ /sok baik/. Ini tutonya saya ambil dari Kak Hafizzulkafly, tapi basecodenya saja ganti pake style saya sendere~

Pertama-pertama, perlu perjelas kalau di style saya kode javascript disini bisa diletakkan di dua tempat. Pertama, di widget dibawah header, kedua di HTML dibawah kode </header>, ya terserah kamu, kamu aja pengen diletakkan di tempat pertama, atau tempat kedua. hasilnya tetep sama. 

Jadi cemane Show/Hide Navbar ni nak tampak kat blog korang ((mendadak malaysia 0.0)) nanti akan nampak macam dekat blognya Ruth ni  Oke mari coba!

Cara Pertama :

1. Blogger > Layout > Add a Gadget > HTML/Javascript (letak bawah header ea :v tapi serah kau lah)
2. Tak usah dikasih judul, just pastekan kode ni
   <style> #sebelum { background:url(http://i1237.photobucket.com/albums/ff465/meerasidi/stripe2.png); padding:2px; margin:15px; } #sesudah { width:100%; background:#fff; display:none; position:fixed; top:0; left:0; z-index:999; opacity:0.75; padding:5px; text-align:center; } .menusatu a { background:transparent; display:inline-block; width:90px; margin-left:5px; font:15px dosis; padding:2px; border-left:1px solid #e6e6e6; text-align:center; color:#000; text-decoration:none; text-transform:uppercase; letter-spacing:1px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .menudua a { background:transparent; display:inline-block; width:90px; margin-left:5px; font:15px dosis; padding:2px; border-left:1px solid #e6e6e6; text-align:center; color:#000; text-decoration:none; text-transform:uppercase; letter-spacing:1px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'/> <center> <div id='sebelum'> <div class='menusatu'> <a href='LINK' title='navigation'>NAVI1</a> <a href='LINK' title='navigation'>NAVI2</a> <a href='LINK' title='navigation'>NAVI3</a> <a href='LINK' title='navigation'>NAVI4</a> </div> </div> </center> <div id='sesudah'> <div class='menudua'> <a href='LINK' title='navigation'>NAVI1</a> <a href='LINK' title='navigation'>NAVI2</a> <a href='LINK' title='navigation'>NAVI3</a> <a href='LINK' title='navigation'>NAVI4</a> </div> </div> <script type='text/javascript'> $(document).ready(function() { var headerTop = $('#sebelum').offset().top; var headerBottom = headerTop + 10; // Sub-menu should appear after this distance from top. $(window).scroll(function () { var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top if (scrollTop > headerBottom) { // Check to see if we have scrolled more than headerBottom if (($("#sesudah").is(":visible") === false)) { $('#sesudah').fadeIn('fast'); } } else { if ($("#sesudah").is(":visible")) { $('#sesudah').hide(); } } }); }); </script>
3. Ubah suaikan
4. Preview.
5. Save. 

Cara Kedua :

1. Blogger > Template > Edit HTML
2. Cari kode </header>
3. Pastekan kode ini dibawah kod </header> tadi
   <style> #sebelum { background:url(http://i1237.photobucket.com/albums/ff465/meerasidi/stripe2.png); padding:2px; margin:15px; } #sesudah { width:100%; background:#fff; display:none; position:fixed; top:0; left:0; z-index:999; opacity:0.75; padding:5px; text-align:center; } .menusatu a { background:transparent; display:inline-block; width:90px; margin-left:5px; font:15px dosis; padding:2px; border-left:1px solid #e6e6e6; text-align:center; color:#000; text-decoration:none; text-transform:uppercase; letter-spacing:1px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .menudua a { background:transparent; display:inline-block; width:90px; margin-left:5px; font:15px dosis; padding:2px; border-left:1px solid #e6e6e6; text-align:center; color:#000; text-decoration:none; text-transform:uppercase; letter-spacing:1px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'/> <center> <div id='sebelum'> <div class='menusatu'> <a href='LINK' title='navigation'>NAVI1</a> <a href='LINK' title='navigation'>NAVI2</a> <a href='LINK' title='navigation'>NAVI3</a> <a href='LINK' title='navigation'>NAVI4</a> </div> </div> </center> <div id='sesudah'> <div class='menudua'> <a href='LINK' title='navigation'>NAVI1</a> <a href='LINK' title='navigation'>NAVI2</a> <a href='LINK' title='navigation'>NAVI3</a> <a href='LINK' title='navigation'>NAVI4</a> </div> </div> <script type='text/javascript'> $(document).ready(function() { var headerTop = $('#sebelum').offset().top; var headerBottom = headerTop + 10; // Sub-menu should appear after this distance from top. $(window).scroll(function () { var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top if (scrollTop > headerBottom) { // Check to see if we have scrolled more than headerBottom if (($("#sesudah").is(":visible") === false)) { $('#sesudah').fadeIn('fast'); } } else { if ($("#sesudah").is(":visible")) { $('#sesudah').hide(); } } }); }); </script>
4. Ubah suaikan
5. Preview.
6. Save. 

nah ada beberapa hal yang musti kalian tau tentang kode-kode diatas. Kareda di kak Hafiz pake basa malay ditempatku sante, kita pake bahasa indonesia.

Sebelum : ketika tampilan tab menu/navi masih ada ditempat asal
Sesudah : ketika web di-scroll maka tab menu/navi akan berpindah di top blog
Menusatu : untuk tab menu/navi saat masih ditempat asal
Menudua : untuk tab menu/navi saat web telah discroll (sudah bertukar tempat di top blog)

Selaman mencoba! Good luck~