Cara Memasang Menu Navigasi I Black Colour

Hallo soabat saya ada tips buat anda bagaimana cara memasang Menu Navigasi yang mana bagi blogger pemula mungkin cukup dibutuhkan lain halnya bagi yang senior. Sayapun juga masih belajar dan saya juga menerima ide dari rekan-rekan bila ada ya biar penuh dengan tips. Sorry saya sampai lupa, oke kita mulai saja, begini ceritanya...

Anda sudah siap? kita mulai :
1.Letakkan code CSS dibawah ini sebelum ]]></b:skin> tag:
<style type="text/css">
.aerobuttonmenu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: auto;
background: #F7F7F7; /*menu strip background*/
border: 1px solid gray;
padding: 4px 0;
border-width: 1px 0;
}
* html .aerobuttonmenu{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}
.aerobuttonmenu a.aero{ /*aero button CSS*/
background: transparent url('http://i721.photobucket.com/albums/ww218/sugwi/aeroleftblack.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Verdana, Trebuchet MS; /* Change 13px as desired */
line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */
height: 31px; /* Height of button background height */
padding-left: 10px; /* Width of left menu image */
text-decoration: none;
margin-right: 5px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}
.aerobuttonmenu a.aero:link, .aerobuttonmenu a.aero:visited, .aerobuttonmenu a:active{
color: white; /*button text color*/
}
.aerobuttonmenu a.aero span{
background: transparent url('http://i721.photobucket.com/albums/ww218/sugwi/aerorightblack.gif') no-repeat top right;
display: block;
padding: 4px 10px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
}
.aerobuttonmenu a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}
.aerobuttonmenu a.aero:hover span{ /* Hover state CSS (for text) */
color: yellow;
}
.black a.aero{
background-image: url('http://i721.photobucket.com/albums/ww218/sugwi/aeroleftblack.gif');
}
.black a.aero span{
background-image: url('http://i721.photobucket.com/albums/ww218/sugwi/aerorightblack.gif');
}
.aerobuttonmenu .rightsection{
float: right;
width: 100px;
position: relative;
top: 3px;
padding-right: 5px;
text-align: right;
}
.aerobuttonmenu .rightsection a{
color: navy;
}
</style>

2.Tambah dan Simpan kode dibawah ini pada HTML/Javascript.
<div class="aerobuttonmenu black">
<div class="rightsection">
<a href="#"><img src="http://hussen-blogging.blogspot.com"/></a>
</div>
<a href="http://hussen-blogging.blogspot.com"><span>Home</span></a>
<a href="http://mutiaramail.blogspot.com"><span>Mutiaramail</span></a>
<a href="http://sumbloggers.blogspot.com"><span>Blog Invest</span></a>
<a href="http://zone-online-blitz.blogspot.com"><span>Mita Zone</span></a>
</div>


Download

Terima kasih atas kunjungannya semoga anda berhasil

Related With: