Cara Membuat Menu Navigasi keren Dengan Kode CSS di Blog

Share Pengalaman - Membuat menu di blog sangatlah penting, terutama bagi para pengunjung blog yang akan mudah bagi mereka untuk mengakses artikel-artikel yang tersedia di blog tersebut.

Membuat menu di blog banyak para kalangan blogger yang mengatakan, jika memasang menu di blog pihak gogle adsense akan menganggap blog tersebut di bangunkan dengan serius. Maka oleh itu buat kalian yang ingin memasang menu di blog sekarang kalian berada pada artikel yang tepat.

Dalam artikel ini saya akan memberikan sedikit cara membuat menu navigasi dengan kode CSS. Untuk caranya tidak begitu payah, silahkan lihat caranya di bawah ini.

Cara Memasang Menu Navigasi Di Blog Dengan kode CSS

➤ Silahkan login dulu ke halaman blog masing-masing.
➤ Silahkan klik menu Tema > Edit Html.
➤ Silahkan cari kode </header>
➤ Silahkan copy dan pastekan kode di bawah ini pada kode </header> boleh diatas dan juga boleh di bawah.

<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>

➤ Selanjutnya silahkan cari kode </style> atau kode ]]></b:skin>. Letakkan kode dibawah di atas kode </style> atau kode ]]></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){
    
}

➤ Selanjutnya silahkan hapus kode yang bewarna merah diatas, jika ingin menu navigasi menyertai dengan templeat blog.
➤ Sekarang jika sudah mengikuti semua lanngkah-langkah diatas selanjutnya silahkan klik tombol simpan templeat.

Nah sampai disini sudah selesai cara membuat menu navigasi di blog dengan tampilan yang keren, semoga bermamfaat, dan semoga sukses. Terima kasih.