Sepertinya Pemblokir Iklan Anda Aktif
Maaf, Sayangnya blog ini tidak bisa hidup tanpa bantuan dari iklan.
Mohon nonaktifkan terlebih dahulu Pemblokir iklan (misal: Adblock) khusus untuk blog ini.
Setelah Anda menonaktifkan AdBlock, silahkan reload halaman ini.
Terima Kasih, semoga anda selalu dimudahkan pada setiap usaha, serta semoga Tuhan menambah kualitas kesehatan anda sekeluarga.

Jabat tangan
FaRo.

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.

Preview cara membuat menu navigasi CSS blogger

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

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

3 comments

sangat bermanfaat kang buat pemula seperti saya ;) kunjungan pertama nih, ada baiknya klo saling follow blog :p

sudah saya follow blognya sist :>)

Terima kasih Gan, infonya sangat bermanfaat

 
Top