Langsung saja pada intinya
ul#css3menu1{
margin:0;list-style:none;padding:1px 1px 1px 0;background-color:#000;background-image:url("mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#162436;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;
*display:inline;}
ul#css3menu1 li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li{
margin:0 0 0 1px;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#c2ffac;cursor:default;padding:10px;background-color:#a8a2aa;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{
background-color:#aaaaff;border-style:none;color:#ffffff;text-decoration:none;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu1 img{
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
display:none;}
ul#css3menu1 li:hover > a img.def{
display:none;}
ul#css3menu1 li:hover > a img.over{
display:inline;}
ul#css3menu1 li a.pressed img.over{
display:inline;}
ul#css3menu1 li a.pressed img.def{
display:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
background-color:#aaaaff;background-image:url("mainbk.png");background-position:0 100px;border-style:none;color:#ffffff;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst>a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.topmenu>a{
text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.toplast>a{
border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast>a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
1. Masuk ke akun Blogger Anda.
3. Cari kode ]]></b:skin> gunakan tombol Ctrl + F untuk mempercepat pencarian.
4. Selanjutnya copy kode di bawah ini dan paste di atas kode tersebut.
ul#css3menu1{
margin:0;list-style:none;padding:1px 1px 1px 0;background-color:#000;background-image:url("mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#162436;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;
*display:inline;}
ul#css3menu1 li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li{
margin:0 0 0 1px;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#c2ffac;cursor:default;padding:10px;background-color:#a8a2aa;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{
background-color:#aaaaff;border-style:none;color:#ffffff;text-decoration:none;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu1 img{
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
display:none;}
ul#css3menu1 li:hover > a img.def{
display:none;}
ul#css3menu1 li:hover > a img.over{
display:inline;}
ul#css3menu1 li a.pressed img.over{
display:inline;}
ul#css3menu1 li a.pressed img.def{
display:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
background-color:#aaaaff;background-image:url("mainbk.png");background-position:0 100px;border-style:none;color:#ffffff;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst>a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.topmenu>a{
text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.toplast>a{
border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast>a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
5. Klik tombol SIMPAN TEMPLATE.
6. Kemudian ke menu Elemen Laman dan klik Tambah Gadget yang ada di bawahheader.
7. Pilih HTML/JavaScript.
8. Lalu copy kode di bawah ini dan paste di Konten.
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="menu baru.html222_files/css3menu1/style.css" type="text/css" /><style>._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href=link url anda" style="height:15px;line-height:15px;">nama menu</a></li>
<li class="topfirst"><a href=link url anda" style="height:15px;line-height:15px;">nama menu</a></li>
<li class="topfirst"><a href=link url anda" style="height:15px;line-height:15px;">nama menu</a></li>
<li class="topfirst"><a href=link url anda" style="height:15px;line-height:15px;">nama menu</a></li>
<li class="topfirst"><a href=link url anda" style="height:15px;line-height:15px;">nama menu</a></li>
<li class="topfirst"><a href=link url anda" style="height:15px;line-height:15px;">nama menu</a></li>
<li class="topfirst"><a href=link url anda" style="height:15px;line-height:15px;">nama menu</a></li>
<li class="topfirst"><a href=link url anda" style="height:15px;line-height:15px;">nama menu</a></li>
<li class="topfirst"><a href=link url anda" style="height:15px;line-height:15px;">nama menu</a></li>
<li class="topfirst"><a href=link url anda" style="height:15px;line-height:15px;">nama menu</a></li>
<li class="topfirst"><a href=link url anda" style="height:15px;line-height:15px;">nama menu</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">Html CSS Menu Bar Css3Menu.com</a></p>
<!-- End css3menu.com BODY section -->
</!doctype>
- 9.Silakan diganti tulisan-tulisan link url anda =dengan yang Anda inginkan.
- Dan tulisan nama menu dengan nama tampilan menu yang anda inginkan
0 komentar:
Posting Komentar