Membuat Float Menu Dengan Logo

Membuat Float Menu Dengan Logo | Dari iseng - lihat koleksi template, suka juga deh dengan template yang namanya Dazzling dari templateism, tapi cuma suka bagian menunya, karen itu, sebisa mungkin aku cloning. Dan akhirnya berhasil. Dan yang anda lihat di menu float di template ini adalah cloning dari menu float Dazzling. Hanya saya ubah bagian warna dengan rgba bertransparan.

HTML

<div id='float-menuwrapper'>
<div id='float-menuwrap'>
<div id='float-menu'>
<div class='logo'>
  <a href='/'><img alt='Home' border='0' src='url logo' style='padding:0px;'/></a>
</div>
<ul>
<li><a href='url anda' rel='nofollow' target='_blank'>Ads</a></li>
  <li><a href='url anda' rel='nofollow' target='_blank'>About</a></li>
  <li><a href='url anda' rel='nofollow' target='_blank'>Contact</a></li>
<li><a href='url anda' rel='nofollow' target='_blank'>Sitemap</a></li>
<li><a href='url anda' rel='nofollow' target='_blank'>Home</a></li>
</ul>
</div>
</div>
</div>

CSS

#float-menuwrapper{background-color: rgba(0, 0, 0, 0.6);box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.9) inset;width:auto;margin-bottom:0px;padding:0 auto;vertical-align: baseline;border-width: 1px;border-style: solid;border-right: 1px solid rgb(17, 17, 17);border-left: 1px solid rgb(17, 17, 17);-moz-border-top-colors: none;-moz-border-right-colors: none;-moz-border-bottom-colors: none;-moz-border-left-colors: none;border-image: none;border-color: rgba(255, 255, 255, 0.08) rgb(17, 17, 17) rgba(255, 255, 255, 0.05);box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.9), 0px 0px 20px rgba(0, 0, 0, 0.7) inset;
height: 70px;width:100%;position:fixed;top:0;left:0;z-index:999;overflow:hidden;}
#float-menuwrap{width:1100px;margin:0 auto;}
#float-menu{width:100%}
#float-menu ul{list-style: none;margin-right:250px}
#float-menu ul li{float:right}
#float-menu ul li a{line-height:34px;padding:5px 0;margin-left:25px;color:#999;font-size:18px;text-transform:uppercase;display:block;text-decoration:none;font-family:'Coda';font-weight:bold;}
#float-menu ul li a:hover{background: none repeat scroll 0% 0% transparent; color: rgb(198, 235, 4);
text-shadow: 0px 0px 20px rgb(198, 235, 4), 0px 0px 30px rgb(198, 235, 4), 0px 0px 40px rgb(198, 235, 4);}
.logo{float:left;background:none;}
.logo img{margin-top:-18px;}

Cara Memasang

1. Letakkan kode HTML dibawah </head>
2. Letakkan kode CSS di atas ]]></b:skin>

Atur letaknya di  #float-menuwrap{margin:0 auto;} ganti sesuai template anda.

Selamat Mencoba :D