Pasang floating menu ini diblogmu.

Copas kode berikut di HTML/Javascript.

<style type="text/css">
html {height: 100%;}
body{
 position: relative;
 height: 100%;
 background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
             -moz-gradient(linear, left top, left bottom, from(#ccc), to(#fff))
             -o-gradient(linear, left top, left bottom, from(#ccc), to(#fff))
}

.navbox {
 position: fixed;
 float: left;
}

ul.nav {
 list-style: none;
 display: block;
 width: 200px;
 position: fixed;
 top: 100px;
 left: 1px;
 padding: 60px 0 60px 0;
 background: url(shad2.png) no-repeat;
 -webkit-background-size: 50% 100%;
 -moz-background-size: 50% 100%;
 -o-background-size: 50% 100%;
}

li {
 margin: 5px 0 0 0;
}

ul.nav li a {
 -webkit-transition: all 0.3s ease-out;
 -moz-transition: all 0.3s ease-out;
 -wo-transition: all 0.3s ease-out;
 background: #cbcbcb url(border.png) no-repeat;
 color: #174867;
 padding: 7px 15px 7px 15px;
 -webkit-border-top-right-radius: 10px;
 -moz-border-top-right-radius: 10px;
 -o-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-bottom-right-radius: 10px;
  -o-border-bottom-right-radius: 10px;
 width: 100px;
 display: block;
 text-decoration: none;
 -webkit-box-shadow: 2px 2px 4px #888;
 -o-box-shadow: 2px 2px 4px #888;
 -o-box-shadow: 2px 2px 4px #888;
}

ul.nav li a:hover {
 background: #ebebeb url(border.png) no-repeat;
 color: #67a5cd;
 padding: 7px 15px 7px 30px;
}
</style>

<br />
<div class="navbox">
<ul class="nav">
<li><a href=" #">Blogger</a></li>
<li><a href=" #">CSS</a></li>
<li><a href=" #">Efek</a></li>
<li><a href=" #">Floating</a></li>
<li><a href=" #">HTML</a></li>
<li><a href=" #">Jquery</a></li>
<li><a href=" #">Script</a></li>
<li><a href=" #">Tips Triks</a></li>
<li><a href=" #">Widget</a></li>
</ul>
</div>
Klik Save.


1 comment

7 Januari 2012 02.41

kalo dibikin disebelah kanan gimna kang ?

Posting Komentar

Konversi Kode
[Mulai Senin, 30 Januari 2012] Maaf, Jangan Masukkan Link Pada Komentar