Cara Membuat Navbar Menu Responsive Untuk Blogger

Navigasi Bar atau nav menu adalah menu yang berfungsi untuk mempermudah pengunjung blog atau website untuk masuk ke halaman tertentu seperti postingan dengan label atau halaman lain seperti About, Disclaimer, Privacy and Policy, Contact, atau Terms of Service. Menu ini sangat lah wajib hukum nya untuk ada di suatu blog atau website, misalnya untuk website atau blog yang ingin mendaftarkan Google Adsense , situs harus memiliki sebuah nav menu.

Menu navigasi yang satu ini memanglah responsive, ketika kita buka di mobile maka tampilan akan seperti di atas itu. Keren bukan? kode CSS dan HTML nya saya dapat dari salah satu website bernama fostrap. Langsung di praktekin aja yuk :

Langkah Pertama :

Masuk ke blogger kemudian ke template lalu edit HTML. cari kode </b:skin> kemudian pastekan kode CSS berikut tepat sebelum kode diatas.

/*------------- Navigasi Menu ------------*/

body {
 padding-top: 50px;
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
navbar a { text-decoration: none !important; }
.nav-ukon {
  display: block;
  margin-bottom: 15px 0;
  background: #3498db;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  z-index: 120;
}
.nav-ukon ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}
.nav-ukon li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  font-size: 14px;
  color: #def1f0;
}
.nav-ukon li a {
  padding: 15px 20px;
  font-size: 14px;
  color: #def1f0;
  display: inline-block;
  outline: 0;
  font-weight: 400;
}
.nav-ukon li:hover ul.dropdown { display: block; }
.nav-ukon li ul.dropdown {
  position: absolute;
  display: none;
  width: 200px;
  background: #2980b9;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  padding-top: 0;
  z-index: 110;
}
.nav-ukon li ul.dropdown li {
  display: block;
  list-style-type: none;
}
.nav-ukon li ul.dropdown li a {
  padding: 15px 20px;
  font-size: 15px;
  color: #fff;
  display: block;
  font-weight: 400;
}
.nav-ukon li ul.dropdown li:last-child a { border-bottom: none; }
.nav-ukon li:hover a {
  background: #2980b9;
  color: #fff !important;
}
.nav-ukon li:first-child:hover a { border-radius: 3px 0 0 3px; }
.nav-ukon li ul.dropdown li:hover a { background: rgba(0,0,0, .1); }
.nav-ukon li ul.dropdown li:first-child:hover a { border-radius: 0; }
.nav-ukon li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #def1f0;
  position: relative;
  top: 15px;
  right: -5px;
  content: '';
}
.title-on-mobile {
  display: none;
}
 @media only screen and (max-width:900px) {
.nav-ukon {
  background: #fff;
  width: 200px;
  height: 100%;
  display: block;
  position: fixed;
  left: -200px;
  top: 0px;
  -webkit-transition: left 0.25s ease;
  -moz-transition: left 0.25s ease;
  -ms-transition: left 0.25s ease;
  -o-transition: left 0.25s ease;
  transition: left 0.25s ease;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  z-index: 105;
}
.title-on-mobile {
  position: fixed;
  display: block;
    top: 10px;
    font-size: 20px;
    left: 100px;
    right: 100px;
    text-align: center;
    color: #FFF !important;
}
.nav-ukon.visible {
  left: 0px;
  -webkit-transition: left 0.25s ease;
  -moz-transition: left 0.25s ease;
  -ms-transition: left 0.25s ease;
  -o-transition: left 0.25s ease;
  transition: left 0.25s ease;
  z-index: 90;
}
.nav-bg-ukon {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 50px;
  margin: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #3498db;
  padding: 12px 0 0 10px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  z-index: 100;
}
.navbar-ukon {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  cursor: pointer;
  margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    padding: 12px;
    z-index: 102;
}
.navbar-ukon span {
  height: 2px;
  background: #fff;
  margin: 5px;
  display: block;
  width: 20px;
}
.navbar-ukon span:nth-child(2) { width: 20px; }
.navbar-ukon span:nth-child(3) { width: 20px; }
.nav-ukon ul { padding-top: 50px; }
.nav-ukon li { display: block; }
.nav-ukon li a {
  display: block;
  color: #505050;
  font-weight: 600;
}
.nav-ukon li:first-child:hover a { border-radius: 0; }
.nav-ukon li ul.dropdown { position: relative; }
.nav-ukon li ul.dropdown li a {
  background: #2980b9 !important;
  border-bottom: none;
  color: #fff !important;
}
.nav-ukon li:hover a {
  background: #3498db;
  color: #fff !important;
}
.nav-ukon li ul.dropdown li:hover a {
  background: rgba(0,0,0,.1); !important;
  color: #fff !important;
}
.nav-ukon li ul.dropdown li a { padding: 10px 10px 10px 30px; }
.nav-ukon li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {
  border-top: 5px solid #505050;
  position: absolute;
  top: 20px;
  right: 10px;
}
.cover-bg {
  background: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
}
 @media only screen and (max-width:1199px) {
.container { width: 96%; }
}
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
left:0;
z-index:120;
}

Langkah Kedua : 

Cari Kode </header> dan pastekan tepat di bawah nya. Untuk peletakan navigasi ini terserah kalian mau di taruh di mana, sebagai contoh saya meletakan nya di bawah header, kalian bisa meletakan nya diatas header.

/*------------- Navigasi Menu ------------*/

<navbar class="fixed-top">
      <div class='nav-ukon'>
        <ul>
          <li><a href='http://iamukon.id/'>Home</a></li>
          <li><a href='javascript:void(0)'>Web Design<span class='arrow-down'></span></a>
            <ul class='dropdown'>
              <li><a href='http://iamukon.id/'>HTML</a></li>
              <li><a href='http://iamukon.id/'>CSS</a></li>
              <li><a href='http://iamukon.id/'>Javascript</a></li>
              <li><a href='http://iamukon.id/'>JQuery</a></li>
            </ul>
          </li>
          <li><a href='javascript:void(0)' >Blogger<span class='arrow-down'></span></a>
            <ul class='dropdown'>
              <li><a href='http://www.iamukon.id/'>Widget</a></li>
              <li><a href='http://iamukon.id/'>Tips</a></li>
            </ul>
          </li>
          <li><a href='javascript:void(0)' >SEO<span class='arrow-down'></span></a>
            <ul class='dropdown'>
              <li><a href='http://iamukon.id/'>Tools</a></li>
              <li><a href='http://iamukon.id/'>Backlink</a></li>
            </ul>
          </li>
          <li><a href='http://iamukon.id/'>Google Adsense</a></li>
          <li><a href='http://iamukon.id/'>Advertising</a></li>
          <li><a href='http://iamukon.id/'>Business</a></li>
        </ul>
      </div>
      <div class='nav-bg-ukon'>
        <div class='navbar-ukon'> <span></span> <span></span> <span></span> </div>
        <a href='' class='title-on-mobile'>UKON</a>
      </div>
    </navbar>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script>
$(document).ready(function(){
  $('.navbar-ukon').click(function(){
   $('.nav-ukon').toggleClass('visible');
   $('body').toggleClass('cover-bg');
  });
 });
</script> 

Untuk teks http://iamukon.id/  silahkan ganti dengan link kalian. Dan langkah terakhir adalah save template nya. Selesai sudah. Terima kasih sudah berkunjung, silahkan share jika artikel ini bermanfaat.