Tutorial blog kali ini tentang cara membuat orange menu vertikal.







 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/AVvXsEhL1fxzkdxVVnP3i9I2aiVprPiEaDFmQWjI83IunDeI7bUFb3ZE1rmsoy-9mgk8jBH9jvBVgiGDCki7AVbogs5BbBOHm9E5rfrXDIKdxnl4xOU8WZvtMxvE6jiwpE6EsdJlceZq_KoiGww/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;

}

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