Jumat, 22 Juni 2012
Pembuatan menu tersebut hanya menggunakan kode CSS praktis bukan.Menurut saya kode css tidak terlalu menambah beban loading blog asalkan kode tersebut tidak terlalu rumit.
Berikut langkah membuat CSS Menu Horizontal :
Berikut langkah membuat CSS Menu Horizontal :
- Login ke blog
- Masuk ke Tata Letak
- Klik Tambah Gadget dan pilih HTML/Javascript
- Copy kode dibawah ini dan ubah URLnya dan nama menu-menumya
- Biar lebih menarik ubah kode warnanya
- Lalu simpan dan letakkan di bagian atas blog sobat
<style type="text/css">
#tabs {
float:left;
width:100%;
height:auto;
font-size:93%;
line-height:normal;
border-bottom:grey;
margin-bottom:1em;
overflow:hidden;
}
#tabs ul {
margin:0;
padding:10px 10px 0 0px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
-moz-border-radius: 10px 10px 0px 0px;-webkit-border-radius: 10px 10px 0px 0px;-o-border-radius:10px 10px 0px 0px; background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f))
; border: 4px inset red;
margin:2px;
padding:0px 5px 0px 5px;
font-family: Comic Sans MS,sans-serif;
font-size: large;
}
#tabs a span {
float:left;
display:block;
padding:4px 6px 4px 6px;
margin-right:2px;
color:#FFF;
}
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
}
#tabs a:hover {
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690)); transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg);
}
#tabs a:hover span {
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690)); transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg);
}
</style>
<div id="tabs">
<ul>
<li></li>
<li><a href="URL Blog SOBAT"><span>Menu 1</span></a></li>
<li><a href="URL Blog SOBAT"><span>Menu 2</span></a></li>
<li><a href="URL Blog SOBAT"><span>Menu 3</span></a></li>
<li><a href="URL Blog SOBAT"><span>Menu 4</span></a></li>
<li><a href="URL Blog SOBAT"><span>Menu 5</span></a></li>
<li><a href="URL Blog SOBAT"><span>Menu 6</span></a></li>
</ul>
</div>
