Tutorial blog kali ini tentang cara membuat orange menu vertikal.
DEMO
Dan berikut ini caranya:
1. Login blog
2. Template > edit html dan letakkan kode css berikut di atas ]]></b:skin>
#cssmenu {
width: 200px;
border-style: solid solid none solid;
border-color: #D76100;
border-size: 1px;
border-width: 1px;
padding: 0px;
}
#cssmenu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#cssmenu li a {
height: 32px;
height: 24px;
text-decoration: none;
font-weight: normal;
color: #9E3C02;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7iBtSS73ZNjdvFZqaAEWbcbwy_f5W1-nHbvhORinRZtZztvaGZ3epIdFM4OdY3BTO66B4VzwnumRp0NkqyfIWJDeV3fSJ3bxxyuREDGXBd2WvooHjxeLaLBRl5RjQXhx2JMsHVQlQwnY/s1600/mig33eaglemenu4.gif);
padding: 8px 0 0 30px;
}
#cssmenu li a:hover {
color: #fff;
background: url(menu4.gif) 0 -32px;
padding: 8px 0 0 30px;
}
#cssmenu li a:active {
color: #fff;
background: url(menu4.gif) 0 -64px;
padding: 8px 0 0 30px;
}
simpan template
3. Letakkan kode html berikut di layout
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Ganti kode yang berwarna dengan url dan menu yang anda inginkan
4. selesai
Comments
Post a Comment