Cara Membuat Menu Tab Horizontal
Huuh... akhirnya siap juga buat menu tab horizontal ane..walau masih simpel,tak apalah. Maklum Newbe..kale ne ane mw berbagi kepada sobat blogger yang newbe (kayak ane) untuk membuat Menu Tab Horizontal.Ini semua berkat Mas AshTho, mas makasih buat Postingan Parse HTML nya ya???
Ok!! Marre Mulai...
Caranya gini :
· Masuk dulu ke situs CSS www.cssportal.com
· Pilih CSS EXAMPLE -- Horizontal Menus -- Pilih menu tab mana yang sobat suka, dan klik.
· Setelah klik akan muncul kode HTML dan CSS nya.
· Kode HTML yang ane pilih
NB : Yang Warna HIJAU ganti dengan alamat blog kamu dan yang berwarna MERAH ganti dengan nama menu sesukamu.
· Kode CSS yang ane Pilih
#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("left_both.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #765;
}
#header a {
float:left;
display:block;
width:.1em;
background:url("right_both.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#home #nav-home, #news #nav-news,
#products #nav-products, #about #nav-about,
#contact #nav-contact {
background-position:0 -150px;
border-width:0;
}
#home #nav-home a, #news #nav-news a,
#products #nav-products a, #about #nav-about a,
#contact #nav-contact a {
background-position:100% -150px;
padding-bottom:5px;
color:#333;
}
#header li:hover, #header li:hover a {
background-position:0% -150px;
color:#333;
}
#header li:hover a {
background-position:100% -150px;
}
· Setelah udah dapet kode-kodenya, acara selanjutnya adalah masuk ke blogger.com--Rancangan--Edit HTML--jangan lupa Expand Widget
· Kode HTML letak di bawah kode
· Kode CSS letak diatas kode ]]>
· Simpan Template
· Simpan Template
