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

11 komentar untuk "Cara Membuat Menu Navbar di Blog"

  1. keren sob.. thanks.
    comment back ya..

    BalasHapus
  2. Balasan
    1. kok Bary mau tanya sama siapa ?, klo sama saya apa yang mau ditanyakannya ?

      Hapus
  3. cuman kasih saran aja broh :3 Itu aturan CSS Width Nya Di Sesuaikan Dengan Panjang Content Sobat Bukan 100% Over Dosisi :v :v
    Dan Juga Di Tambahkan CSS position:fixed; <-- Supaya Bisa Berada Di Nav Blog ... Sekian Terima Kasih
    kxmadagascar.blogspot.com

    BalasHapus
    Balasan
    1. Wah klo width nya sudah diperbaiki sob, dan kalo ditambah position:fixed, nantinya malah menunya diam ditempat dan menghalangi widget yang lainnya sob, tuh lihat widget facebook, dan twitter disamping kanan blog saya ini kalo pake position:fixed, nantinya posisi widgetnya diam ditempat.

      Hapus
    2. Biar Elegant Menunya Jadi Floating Gitu Kan Keren :3
      Seterah Elu.. Deh :3

      Hapus
  4. ikut nyimaak ka yoga ! :D

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top