Orange Menu Vertical

Tutorial blog kali ini tentang cara membuat orange menu vertikal.

DEMO

• Home
• Products
• About
• Contact

 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/AVvXsEiVn-MlCeaVNcfx85t2aaiJRsrxQ00VnWGliVDpvljIiyXtDXNqRLBsS0VHSes-AabuP5eJIqBlodgwNL51YqV4Ktf6_RxXWLZI9QpOB196vjOci0fTwsH0DlzmHFFpMqTgoBs5QgFVWmk/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