membuat menu tab di blog

Tweet

saya akan memberikan tutorial untuk membuat menu tab seperti yang ada diatas blog saya ini.
1. buka widget HTML/java
2. lalu tuliskan script berikut :



<style type="text/css">
.h_mnu_01{
   width: 100%;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: bold;
   font-style: normal;
   text-decoration: none;
}
.h_mnu_01 ul{
   margin: 0;
   padding: 0;
   float: left;
   width: 100%;
   background: #000000;
   border-top-width: 1px;
   border-right-width: 0;
   border-bottom-width: 1px;
   border-left-width: 0;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #000000;
   border-right-color: #000000;
   border-bottom-color: #000000;
   border-left-color: #000000
}

.h_mnu_01 ul li{
display: inline;
}

.h_mnu_01 ul li a{
   float: left;
   color: #FFFFFF;
   padding: 5px 11px;
   text-decoration: none;
   border-right-width: 1px;
   border-right-style: solid;
   border-right-color: #000000;
}

.h_mnu_01 ul li a:visited{
color: #FFFFFF;
}

.h_mnu_01 ul li a:hover, .h_mnu_01 ul li .selected{
   color: #FFFF00 !important;
   padding-top: 5px;
   padding-bottom: 5px;
   background: #008000;
}

</style>



<div class="h_mnu_01">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tips n' Trik</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">About </a></li>
</ul>
</div>

tuliskan kode diatas dengan mengganti "#" dengan link yang akan dituju dan tulisan warna merah bisa di ganti sesuai keinginan anda,,,,
3. lalu save widget tersebut...

semoga bermanfaat untuk para blogger... ^_^