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.

Cara Mudah Membuat Menu Navigasi Blog Dengan CSS

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.

Subscribe to receive free email updates:

19 Responses to "Cara Membuat Menu Navigasi Blog Dengan CSS Keren Terbaru 2017"

  1. ini yang saya cari min, oh ya min request dong cara membuat menu berbentuk vertikal!

    ReplyDelete
  2. Replies
    1. 100% responsive gan,langsung dicoba aja

      Delete
  3. izin dicoba caranya gan, mudah mudahan bisa , thanks gan !! :)

    ReplyDelete
  4. makasih gan, aku mau nyobain dulu.

    ReplyDelete
  5. Ok gan makasih info nya , akan saya praktekan di blog ku

    ReplyDelete

Jangan ada link aktif di komentar karena komentar anda di moderasi!