Cara Membuat Menu Navbar Melayang di Blogger

Hai,pada kesempatan kali ini saya akan menjelaskan bagaimana tutorial Cara Membuat Menu Navbar Melayang di Blogger (sticky menu),contoh sampelnya adalah seperti di facebook,sticky menu memudahkan kita untuk melihat Pemberitahuan,pesan,dll tanpa harus mengscroll keatas dan kebawah,pada awalnya Navbar terlihat normal setelah kita scroll ke atas maka navbar akan melayang ketika di scroll ke bawah berikut coding dan cara penempatannya :

1.Pastekan script javascriptnya sebelum tag </body>, caranya Masuk ke Tema > Edit HTML > lalu tekan tombol CTRL+ F lalu ketik </body> enter.

Coding Javascript:

<script type='text/javascript'>

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

Keterangan edit Bagian #menu karna nama Id menu navbar saya
#nav, jadi sesuaikan dengan Id dari menu navigator kalian ya,untuk demonya bisa kalian lihat di blog ini

2.Copy & Paste kode di bawah ini tepat di atas kode ]]</b:skin>

/*-----Responsive Menu ----*/
body {margin: 0px;}
#menu{background: #50B7DC;color: #FFF;height: 40px;border-bottom: 2px solid #DDD;box-shadow: 1px 2px 9px #B1B1B1;border-top: 2px solid #DDD;} #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}
#menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;
background: #5FC6EB;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #50B7DC;position: absolute;z-index: 99;display: none;}
#menu ul.menus li{display: block;width: 100%;font:normal 0.8em Arial;text-transform: none;
text-shadow: none;border-bottom: 1px dashed #31AFDB;}

#menu ul.menus a{color: #FFF;line-height: 35px;}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{background: #5FC6EB;color: #FFF;-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;}

@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}

3.pastekan code ini di bawah <body>.

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigasi&#160;Menu</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
<li><a href='#'>Tab 4</a></li>
<li><a href='#'>Tab 5</a></li>
<li><a href='#'>Tab 6</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Advertise</a></li>
</ul>
</nav>

navbar ini saya ambil dari blog http://www.contohblog.com/2015/01/cara-membuat-navigasi-menu-responsive.html

lalu save template done goodluck ,terimakasih :D

1 Response to "Cara Membuat Menu Navbar Melayang di Blogger"

Anonymous28 January 2022 at 23:06
Sand Casino - Singapore | Play Online | SGCASino
Sand 샌즈카지노 Casino is 1xbet korean an amazing online casino for Singapore, Singapore players. Explore our online casino games selection and claim your welcome 카지노 bonus.