Cara Mudah Membuat Menu Navigasi CSS Blog / Website

Navigasi adalah salah satu elemen penting di suatu website, karena pengunjung akan tertarik untuk membuka halaman lain dari suatu website jika Navigasi website tersebut jelas dan menarik, kali ini faro akan berbagi cara membuat navigasi CSS website atau blog yang mudah dilakukan.

Menu Navigasi dengan CSS dasarnya adalah merubah daftar link menjadi navigasi, sehingga mengubahnya mudah, semudah mengubah link didalamnya.

1. Daftar Link
Misalkan faro ingin membuat link Home Daftar Isi Tentang Blog Kontak Kami.
maka kode htmlnya adalah :

<a href="http://www.blognafaro.com/">Home</a>
<a href="http://www.blognafaro.com/p/daftar-isi.html">Daftar Isi</a>
<a href="http://www.blognafaro.com/p/about.html">Tentang blog</a>
<a href="http://www.blognafaro.com/p/kontak-kami.html">Kontak Kami</a>

lalu faro jadikan link - link tersebut menjadi daftar link, daftar link dibuat menggunakan tag elemen <ul> dan <li>,
maka kode htmlnya menjadi seperti ini :

<ul>
<li><a href="http://www.blognafaro.com/">Home</a></li>
<li><a href="http://www.blognafaro.com/p/daftar-isi.html">Daftar Isi</a></li>
<li><a href="http://www.blognafaro.com/p/about.html">Tentang blog</a></li>
<li><a href="http://www.blognafaro.com/p/kontak-kami.html">Kontak Kami</a></li>
</ul>

hasilnya akan seperti ini :
2. Mempercantik Navigasi
Sebuah daftar link baru bisa disebut navigasi jika berada di tag <nav>, karena faro ingin membuat sebuah navigasi yang stylish maka dibutuhkan CSS, agar css ini bekerja di navigasi, dibutuhkan identifier, okelah langsung saja ya..

daftar link menjadi navigasi, berikut kodenya :

<nav class='navigation'>
<ul>
<li><a href="http://www.blognafaro.com/">Home</a></li>
<li><a href="http://www.blognafaro.com/p/daftar-isi.html">Daftar Isi</a></li>
<li><a href="http://www.blognafaro.com/p/about.html">Tentang blog</a></li>
<li><a href="http://www.blognafaro.com/p/kontak-kami.html">Kontak Kami</a></li>
</ul>
</nav>

 untuk kode CSSnya

.navigation ul {
    list-style-type:none;
    margin:0;
    padding:0;
width: auto; height:auto;
}
.navigation li {
    display:inline;
}
.navigation li a {
    float: left;
    display: block;
    line-height: 150%; /* 150% adalah tinggi navigasi */
    color: white;          /* warna tulisan navigasi*/
    background: black;   /* warna background navgasi */
    border: 1px solid black; /* 1 px ukuran border, solid jenis border, black warna border */
    width:100px; /* lebar masing-masing tombol navigasi */
    text-align:center;
    text-decoration:none;
}
.navigation li:hover a {
    color: red; /* warna tulisan tombol saat kursor ada di navigasi adalah merah */
    background: black; /* background tombol tetap hitam */
    border: 1px solid red; /* border jadi merah */
}

lebih mudahnya anda ganti elemen yang ada komentar di sampingnya.
tombol navigasi hasil dari percobaan diatas adalah sebagai berikut


Membuat Navigasi Drop Down Menu
ok preview dulu baru tutornya ya :

cara untuk membuat menu seperti itu dasarnya adalah memasukkan sebuah daftar link baru ke dalam anggota daftar link yang telah ada.

contohnya, saya punya daftar link baru ini

    <ul>
    <li><a href="#URL_Label_1">Lable 1</a></li>
    <li><a href="#URL_Label_1">Label 2</a></li>
    <li><a href="#URL_Label_1">Label 3</a></li>
    <li><a href="#URL_Label_1">Label 4</a></li>
    </ul> 

ingin saya masukkan ke dalam menu daftar isi

 <li><a href="http://www.blognafaro.com/p/daftar-isi.html">Daftar Isi</a></li>

maka masukkan daftar link sebelum tag </li> menu daftar isi
menjadi seperti berikut

<li><a href="http://www.blognafaro.com/p/daftar-isi.html">Daftar Isi</a>
    <ul>
    <li><a href="#URL_Label_1">Lable 1</a></li>
    <li><a href="#URL_Label_1">Label 2</a></li>
    <li><a href="#URL_Label_1">Label 3</a></li>
    <li><a href="#URL_Label_1">Label 4</a></li>
    </ul>
</li>

sedangkan untuk pengaturan CSS-nya, karena terlalu panjang untuk dijelaskan, anda bisa menggunakan css yang ada di preview diatas, sudah saya beri komentar elemen yang bisa diganti.

Penempatan di Template Blogger
Pertama, copy paste kode CSS di bagian skin, tepatnya sebelum tag end  ]]></b:skin>

Kedua, untuk memasang kode html navigasi,
jika anda ingin menempatkan navigasi sebelum header, maka copy paste kode sebelum tag <header..
jika anda ingin menempatkan navigasi setelah header, maka copy paste kode setelah tag end </header>.

Sekian, semoga bermanfaat. :)

Post link : http://www.blognafaro.com/2013/12/cara-mudah-membuat-menu-navigasi-css-blog-website.html

Cara Mudah Membuat Menu Navigasi CSS Blog / Website

Ringkasan : Ada beberapa cara membuat navigasi website, namun yang mudah dimengerti dan dilakukan adalah Navigasi CSS, berikut tutorialnya. .
Jumlah Kata : | Dipublikasikan pada Thursday, December 12, 2013