Cara Memasang Menu Navigasi Responsive Header Blog

Membuat sebuah menu navigasi tentunya akan sangat penting diterapkan pada tema blog anda karena pada menu tersebut anda bisa memasukan beberapa menu pilihan seperti menu label ataupun menu tos bog seperti About, TOS, Privacy Policy, Disclaimer, Contact dan Sitemap. Untuk kepentingan kelengkapan dari blog it sediri.

Selain itu juga pada Menu navigasi dapat menambah beberapa link yang dapat mengarahkan ke halaman- halaman tertentu sesuai dengan kepentingan anda sendri.

Tentuya untuk Menambahkan beberapa menu pilihan yang anda inginkan, maka anda perlu menambahakan menu navigasi tambahan, maka pada kesempatan kali ini kita akan membahas mengenai cara membuat menu navigasi responsive pada header blog anda. Untuk lebih elasnya simaak pembahasan dibawah ini.

Cara Memasang Menu Navigasi Responsive Header Blog

Pertama Login terlebih dahulu ke Dasboard Blogger
Pilih menu Tema, kemudian pilih Edit HTML
Salin kode CSS dibawah ini, kemudian tambahkan kode tersebut sebelum kode ]]></b:skin>

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #4caf50;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 6px 10px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 12px;
}

ul.topnav li a:hover {
  background-color: #555;
}

ul.topnav li.icon {
  display: none;
}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {
    display: none;
  }

  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {
    position: relative;
  }

  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  ul.topnav.responsive li {
    float: none;
    display: inline;
  }

  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

Jika ingin mengubah background maka ganti kode background-color: #4caf50;

Jika ingin mengubah warna tulisan tinggal ganti kode color: #f2f2f2;

Jika ingin mengubah ukuran tulisan tinggal ganti kode font-size: 12px;

Modifikasi kode dibawah ini, kemudian tambahkan kode tersebut sebelum kode <body>

<ul class='topnav' id='myTopnav'>
  <li><a href='/'>Home</a></li>
  <li><a href='/p/about.html'>About</a></li>
  <li><a href='/p/privacy-policy.html'>Privacy Policy</a></li>
  <li><a href='/p/disclaimer.html'>Disclaimer</a></li>
  <li><a href='/p/sitemap.html'>Sitemap</a></li>
  <li class='icon'> <a href='javascript:void(0);' onclick='myFunction()'>&#9776;</a></li>
</ul>

Untuk mengatur menu yang akan di tambahkan anda cukup memodifikasi kode <li><a href='( isikan link yang anda akan masukan)’> (isi keterangan yang hendak akan anda tampilkan </a>

Salin kode CSS berikut ini,kemudian tambahkan kode tersebut sebelum kode </body>

<script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
</script>

Cukup sekian mengenai pebahasan kali ini apabila ada yang ingin ditanyakan maka dapat menanyakanya di kolom koentar dibawah ini.