Cara Membuat Menu Navigasi Blog Dengan CSS Keren Terbaru 2017

Menu navigasi sangatlah penting dalam suatu blog. Bukan hanya penting bagi pengunjung blog tetapi juga bagi anda yang ingin mendaftar akun adsense. Karena menu navigasi merupakan properti blog yang harus ada.

Banyak cara untuk membuat menu navigasi,mulai dengan menggunakan menu navigasi sederhana dari blogger sampai dengan menggunakan CSS. CSS disini merupakan kode yang berfungsi untuk memperindah atau memberi warna navbar yang akan dibuat.

Menu navigasi dengan menggunakan style CSS memang sangat mudah untuk dibuat,serta sangat sederhana dan simple. Selain itu navigasi ini juga bisa dropdownmenu sehingga anda bisa menambahkan submenu dengan navbar ini.

CSS ibarat seperti perwarna yang digunakan dalam makanan,jika tidak ada maka makanan tersebut terlihat tidak menarik. Padahal sama saja fungsinya,yaitu bisa dimakan dan mengenyangkan. Bagi anda yang mahir dalam kode CSS anda bisa membuat kode sendiri untuk mempercantik navigasi yang ingin anda buat. Atau merombak dan mengedit CSS navbar berikut.  Bagi anda yang ingin membuat navigasi CSS ,silakan ikuti langkah berikut :

Cara Membuat Menu Navigasi CSS

Langkah 1
Silakan masuk ke blogger,Klik Tema/Template → Edit HTML


Langkah 2

Silakan anda salin kode pemanggil navigasinya lalu letakkan/pastekan ditempat navigasi ingin dimunculakan,bisa anda letakkan diatas header atau dibawah kode </header>

<nav>
<ul>
<li>Home</li>
 <li>Tutorial<ul>
  <li>Photoshop</li>
  <li>Illustrator</li>
  <li>Web Design<ul>
     <li>HTML</li>
     <li>CSS</li>
  </ul></li>
 </ul></li>
<li>Articles</li>
<li>Inspiration</li>
</ul>
</nav>

Langkah 3
Salin CSS berikut lalu letakkan diatas kode </style> atau ]]></b:skin>

nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
nav ul {
 background: #D8D8D8; 
 padding: 0px;
 border-radius: 10px;  
 list-style: none;
 position: relative;
    font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
    display: inline-table;
}
 nav ul:after {content: ""; clear: both; display: block;}
nav ul li { float: left;}
 nav ul li:hover {background: #4b545f;}
  nav ul li:hover a {color: #fff;}
 
 nav ul li a {display: block; padding: 15px 30px;color: #757575; text-decoration: none;}
nav ul ul {background: #5f6975; border-radius: 0px; padding: 0;position: absolute; top: auto;}
 nav ul ul li {float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative;}
  nav ul ul li a {padding: 15px 30px; color: #fff;} 
   nav ul ul li a:hover {background: #4b545f;}
nav ul ul ul {position: absolute; left: 100%; top:0;}

@media screen and (max-width:768px){
    
}

Jika sobat ingin supaya lebar menu navigasi tersebut bisa menyesuaikan dengan lebar template/blog anda maka silakan hapus kode yang berwarna merah.

Lalu klik Simpan

Nah sekarang coba lihat blog sobat apakah menu navigasinya sudah muncul. Cukup sekian tutorial cara membuat menu navigasi dengan CSS. Semoga bisa membantu dan bermanfaat.