Perhatikanlah gambar diatas, kolom warna biru dengan tulisan daftar menu seperti Home, Usaha, Kuliner, Tip dan Trik, Kesehatan, Contact Us dan lain-lain..itulah yang di sebut menu bar. Jika anda mengunjungi situs blog atau website pasti anda akan menemukanya meski dengan bentuk tampilan yang berbeda. Karena setiap blogger mempunyai kreatifitasnya masing-masing untuk mempercantik tampilan blog.
Menu bar disebuah blog sangatlah penting keberadaanya. Fungsi dari menu bar adalah supaya pengunjung blog dengan mudah menemukan artikel sesuai kategori yang di carinya. Selain itu dengan memasang menu bar akan membuat blog terlihat rapi dan sistematis.
Selain bentuk yang beragam, penempatan menu bar juga bisa diatur sesuai keinginan. Menu bisa dipasang diatas header, dibawah header ( paling banyak ), bisa pula dipasang di bagian footer sebuah blog. Berikut cara buat menu bar di blog :
1. Klik dasbord2. Pilih template lalu klik Edit HTML
3. Klik Expand Template Widget
4. Cari script <div class='main-outer'>
5. Masukan kode dibawah tepat diatas script tadi
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#1177CC; width:960px; margin:0 -10px;padding:0;height:35px;border-radius:10px}
#cat-nav a { color:#fff; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav
a { font-family:Georgia, "Times New Roman", Times, serif;
font-style:bold; font-weight:700; font-size:14px; display:block;
z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; }
#secnav li ul li a {
font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px;
padding:0 10px; font-size:11px; font-style:normal; font-weight:400;
color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav
li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav
li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul {
left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Usaha</a></li>
<li><a href='#'>Kuliner</a></li>
<li><a href='#'>Tip dan Trik</a></li>
<li><a href='#'>Kesehatan</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Contact Us</a></li>
</ul>
</div>
6. Save Template
Keterangan ( gantilah sesuai selera anda ):
- tanda # ( warna biru ) ganti dengan link url blog sobat
- tulisan Menu (warna biru ) ganti dengan nama menu anda
- tanda #156994 warna background ganti sesuai warna anda
- ukuran lebar menu width: 960px sesuaikan ukuran blog
- tinggi kotak menu : 35px
Demikianlah uraian saya kali ini, semoga bermanfaat selamat mencoba. Bila masih belum jelas dengan keterangan diatas jangan sungkan kirim komentar. Terima kasih anda telah membaca Cara Buat Menu Bar di Blog.
