Pockie Blog

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.