Cara Membuat Menu Horizontal

Kali ini saya akan membahas tutorial blog tentang membuat menu horizontal yang terletak di bawah header, seperti blog milik saya. Walaupun sudah banyak tutorial mengenai ini, tapi karena saya gak punya ide lagi buat posting blog yah.. mau apalagi. Okey! menu ini di buat dengan css (kalo gak tau cari di mbah google), CSS cukup membantu kita dalam menangani tampilan dari sebuah blog atupun web, sehingga web tersebut tampak enak di pandang mata (kalo ane!?"najis!!").
Bagi pelajar TI khususnya pasti tahu tag yang bernama <ul> dan <li>, nanti kita akan memakai kedua tag tersebut ditambah code css untuk membuat menunya. tengok betul-betul cara di bawah ini:
1. Masuk ke blogger.com .
2. klik rancangan>> edit html.
3. Copy pastekan code di bawah ini di bawah body { } (cari pake ctrl+f).
#NavbarMenu {
background:#00CCFF repeat-x top;
width: 1000px;
height: 35px;
color: #ffffff;
margin: 0 0 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
}
#NavbarMenuleft {
background:#00CCFF repeat-x top;
width: 680px;
float: left;
margin: 0;
padding: 0;
}

#menu {
margin: 0;
padding: 0;
}
#menu ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
margin: 0;
padding: 0;
}
#menu li a, #menu li a:link, #menu li a:visited {
color: #ffffff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 8px 11px 8px;
font: normal 11px verdana, arial, Times New Roman;
background:#00CCFF repeat-x top;
text-decoration:none;
}
#menu li a:hover, #nav li a:active {
background:#00CCFF repeat-x top;
color: #fff;
margin: 0;
padding: 9px 15px 8px;
text-decoration:none;
font:bold;
}

}
#menu li li a:hover, #menu li li a:active {
background: #233e45;
color: #fff;
padding: 7px 10px;

}
#menu li {
float: left;
padding: 0;

}
#menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#menu li ul a {
width: 140px;
}
#menu li ul ul {
margin: -32px 0 0 171px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
left: auto;

}
#menu li:hover, #menu li.sfhover {
position: static;
}

4. Setelah itu save templates.
5. Klik element >> Tambah gadget >> html/javascript.
6. copy pastekan script di bawah ini di kotak kosong bawah.

<div id='navbarmenu'>
<ul id="menu"><li><a href="">Home</a></li>
<li><a href="http://blank-note.blogspot.com">Download</a></li>
<li><a href="http://cucucmi.wordpress.com">Programming</a></li>
<li><a href="http://dr-dakwahbyipm.blogspot.com">Islami</a></li>
<li><a href="http://c124ck312.blogspot.com">Hacking</a></li>
<li><a href="http://facebook.com">Facebook</a></li>
<li><a href="http://google.com">Google</a></li>
<li><a href="mailto:user@yahoo.com">contact</a></li></ul></div>
7. save, lalu drag n drop (tekan jangan dilepas) taruh di bawah header (biasanya ada garis putus putus kalau letaknya tepat.

Sekian sobat semoga bermanfaat. Kalian juga dapat mencopy paste artikel ini tapi dengan syarat memberikan source link blog blank-note ini.

Sumber : http://blank-note.blogspot.com

Related Post