Latest News

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 hingga dengan menggunakan CSS. CSS disini merupakan isyarat 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 mampu dropdownmenu sehingga anda mampu menambahkan submenu dengan navbar ini.

Cara Mudah Membuat Menu Navigasi Blog Dengan CSS

CSS menyerupai mirip perwarna yang digunakan dalam makanan,jika tidak ada maka makanan tersebut terlihat tidak menarik. Padahal sama saja fungsinya,yaitu mampu dimakan dan mengenyangkan. Bagi anda yang hebat dalam isyarat CSS anda mampu membuat isyarat 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 isyarat pemanggil navigasinya lalu letakkan/pastekan ditempat navigasi ingin dimunculakan,bisa anda letakkan diatas header atau dibawah isyarat </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 sahabat ingin semoga lebar menu navigasi tersebut mampu menyesuaikan dengan lebar template/blog anda maka silakan hapus isyarat yang berwarna merah.

Lalu klik Simpan

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