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.
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 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.
ini yang saya cari min, oh ya min request dong cara membuat menu berbentuk vertikal!
BalasHapusok gan
HapusIjin coba gan
BalasHapusSilakan bisa langsung dicoba gan
Hapusthanks gan infonya, bermanfaat
BalasHapusSama-sama,makasih atas kunjungannya
Hapusketemu juga. mantap gan
BalasHapusresponsive ga gan ??
BalasHapus100% responsive gan,langsung dicoba aja
Hapusizin dicoba caranya gan, mudah mudahan bisa , thanks gan !! :)
BalasHapusSilakan dicoba gan
HapusKeren artikelnya
BalasHapusmakasih gan, aku mau nyobain dulu.
BalasHapusSama-sama,makasih atas kunjungannya
HapusSalam kenal,
BalasHapussalam kenal juga gan
HapusOk gan makasih info nya , akan saya praktekan di blog ku
BalasHapusMantap nih gan
BalasHapusSIP LAH
BalasHapus