Membuat Left Rocket Dock Menu

Jumat, 17 Juni 2016

Membuat Left Rocket Dock Menu

Left Rocket Dock Menu ini tampil melayang disebelah kiri Blog, mencoba dengan memadukan Tooltip sederhana, Silahkan lihat demonya disamping ini.Ukuran dari menu ini cuma 3kb, jadi tidak terlalu membebani loading blog, Nah bagi sobat yang mau memasang langsung aja copy kodenya dibawah ini. "Warning : Not Support dengan browser internet explorer"
Lihat kodenya di bawah ini :

<html>
<style type="text/css">
a.toltip{position:relative; z-index:24; color:#3CA3FF;
}
a.toltip span{display:none;
}
a.toltip:hover{z-index:25;
}
a.toltip:hover span.tooltip{display:block; position:absolute; top:15px; left:80px; padding:15px 0 0 0; width:200px; color:#000; text-align:center;opacity:0.8;
}
a.toltip:hover span.top{display:block; padding:30px 8px 0; background:url(http://i1206.photobucket.com/albums/bb455/binkbenk/bubble.gif) no-repeat top;
}
a.toltip:hover span.middle{display:block; padding:0 8px;font:12px Verdana;background:url(http://i1206.photobucket.com/albums/bb455/binkbenk/bubble_filler.gif) repeat bottom;
}
a.toltip:hover span.bottom{display:block; padding:3px 8px 10px; color:#548912; background:url(http://i1206.photobucket.com/albums/bb455/binkbenk/bubble.gif) no-repeat bottom;
}
ul#lefdock{position:fixed;left:0;top:15%;display:block;width:50px;margin:0;padding:0;
}
ul#lefdock li{display:inline;float:left;border:0;margin:0;padding:0;background:rgba(1,11,544,.5);border-radius:0 5px 5px 0;border:1px solid #555;box-shadow:inset 0 0 1px #fff;
}
ul#lefdock li a{background-position:center;background-repeat:no-repeat;background-size:50px 30px;display:block;float:left;width:50px;height:50px;padding:5px;-webkit-transition:all 1s;transition:all 1s;opacity:.5;
}
ul#lefdock li a:hover{background-color:#fc0;background-size:100px 100px;width:100px;height:100px;opacity:1;
}
ul#lefdock .home a{background-image:url(http://i1206.photobucket.com/albums/bb455/binkbenk/home1.png)
}
ul#lefdock .isi a{background-image:url(http://i1206.photobucket.com/albums/bb455/binkbenk/isingi.png)
}
ul#lefdock .fb a{background-image:url(http://i1206.photobucket.com/albums/bb455/binkbenk/facebook_256-1.png)
}
ul#lefdock .twit a{background-image:url(http://i1206.photobucket.com/albums/bb455/binkbenk/twitter1.png)
}
ul#lefdock .quest a{background-image:url(http://i1206.photobucket.com/albums/bb455/binkbenk/book.png)
}
ul#lefdock .follow a{background-image:url(http://i1206.photobucket.com/albums/bb455/binkbenk/folow.png)
}
</style>
<body>
<ul id="lefdock">
<li class="home"><a class="toltip" href="http://amarajen-hht.blogspot.com/">Berandaku Disini</a></li>
<li class="isi"><a class="toltip" href="http://amarajen-hht.blogspot.com/">Daftar Isi Blogku</a></li>
<li class="fb"><a class="toltip" href="http://amarajen-hht.blogspot.com/">Kenal Aku Lewat Facebook</a></li>
<li class="twit"><a class="toltip" href="http://amarajen-hht.blogspot.com/">Twiterin Aku Dong</a></li>
<li class="quest"><a class="toltip" href="http://amarajen-hht.blogspot.com/">Buku Tamuku</a></li>
<li class="follow"><a class="toltip" href="http://amarajen-hht.blogspot.com/">Menjadi Sahabatku</a></li>
</ul>
</body>
</html>

amarajen

Jumat, 17 Juni 2016

Membuat Left Rocket Dock Menu

A M A R A J E N

0 komentar

Posting Komentar

Label 1

Label 2

Entri Populer

Other Menu