Cara Membuat Menu Navbar di Blog

 Selamat malam sobat Blog Krizeer, apa kabarnya ?, baik kan ?, yaudah kalo baik-baik aja alhamdullilah. Kali ini saya akan menjelaskan tentang bagaimana "Cara Membuat Menu Nav di Blog", meskipun sudah banyak yang mengeposkan artikel tentang Cara Membuat Menu Horizontal di Blog, namun demikian anda sempat bingung memilih style yang mana yang cocok dengan template kalian. Daripada banyak ngomong langsung saya ke intinya yuk kita simak bersama, ini dia tutorialnya baca baik-baik ya :

1. Login ke Blogger
2. Masuk ke Template
3. edit HTML
4. Cari kode ]]></b:skin>, jika sudah ketemu copy kode dibawah ini tepat di atas kode
]]></b:skin>

/* Navigation */
#navigation {
float:left; width:980px; list-style: none; height: 39px; margin:0; padding:0;
}
#navigation li {
list-style:none; position:relative; float: left; height: 39px;background: #77c2a7; /* Warna background menu */
}
#navigation li a, #navigation li a:hover {
border-left:medium none !important;
}
#navigation li a, #navigation li a:link, #navigation li a:visited {
display:block; float:left; height:39px; color:#f6f6f6;  /* Warna teks */
line-height:39px; padding: 0 10px 0 10px; border-right: 1px dashed #dddddd;  /* Garis samping antar menu */
font-weight: bold;  /* Style Teks Tebal */
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
background:#87d1b6;  /* Warna bakground ketika disorot mouse */
color:#222222; /* Warna teks ketika disorot mouse */
text-decoration:line-through;
}
.navigation {
height:39px; width:100%; background:#fff; margin:0; padding:0px; border-top:1px solid #ddd; border-bottom: 3px solid #000; /* Garis bawah */
}
.navigation a:hover {
border-bottom: 3px solid #333;
}

HTML bisa disimpan dimana saja yang penting tidak error, kalau saya ditaruh dibawah header.

<div id='navigation'>
<div class='navigation'>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
<li><a href='#'>Menu 7</a></li>
<li><a href='#'>Menu 8</a></li>
</ul>
</div>
</div>

Baca penting untuk kode yang berwarna merah itu ukuran tinggi menu, tinggi menu bisa anda sesuaikan sesuka hati :D
kode yang berwarna hijau itu warna backgound menu
kode yang berwarna oren itu nama menunya
kode yang berwarna ungu ganti denga url menu kalian.
Dan yang terakhir kode yang berwarna pink itu ukuran lebarnya disesuaikan saja.

Untuk demonya kalian bisa lihat sendiri di blog ini.
Untuk perubahan warna, ukuran menu, dan url, kalian atur sendiri yahh :D
Selamat mencoba, dan semoga artikel ini bermanfaat :v
Baca juga Cara Membuat Auto Tooltip Di Blog

Tweet

Unknown pada 6/21/2013