Sabtu, 23 Juni 2012
Left Rocket Dock Menu ini tampil melayang disebelah kiri blog. Ukuran dari menu ini cuma 3kb, jadi tidak terlalu membebani loading blog. Nah bagi sobat yang mau memasang langsung aja copy kodenya dibawah ini, atau kalau kurang puas lihat dulu demonya pada link dibawah ini.
Langkah langkah membuatnya :
- Masuk ke blog sobat
- Pilih Elemen Laman
- Klik Tambah Gadget HTML/javascript
- Pastekan kode dibawah ini
- Jangan lupa ganti kode yang berwarna biru dengan URL blog sobat
- Untuk mengatur posisinya utak-atik pada kode position:fixed;left:-140px;top:35%;
Sumber : http://cuerosbhelatos.blogspot.com/2012/02/css-left-rocket-dock-menu_27.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:-140px;top:35%;transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg);-o-transform:rotate(90deg);
}
ul#lefdock li{width:60px;display:inline;float:left;border:0
}
ul#lefdock li a{background-position:center;background-repeat:no-repeat;background-size:60px 30px;display:block;float:left;width:130px;height:130px;text-decoration:none;text-align:center;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;opacity:.5;transform:rotate(-90deg); -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg);-o-transform:rotate(90deg);
}
ul#lefdock li a:hover{background-size:100px 100px;opacity:1;margin-top:-30px;
}
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>
<ul id="lefdock">
<li class="home"><a class="toltip" href="http://www.blogger.com/"><span class="tooltip"><span class="top"></span><span class="middle">Berandaku Disini</span><span class="bottom"></span></span></a></li>
<li class="isi"><a class="toltip" href="http://www.blogger.com/"><span class="tooltip"><span class="top"></span><span class="middle">Daftar Isi Blogku</span><span class="bottom"></span></span></a></li>
<li class="fb"><a class="toltip" href="http://www.blogger.com/"><span class="tooltip"><span class="top"></span><span class="middle">Kenal Aku Lewat Facebook</span><span class="bottom"></span></span></a></li>
<li class="twit"><a class="toltip" href="http://www.blogger.com/"><span class="tooltip"><span class="top"></span><span class="middle">Twiterin Aku Dong</span><span class="bottom"></span></span></a></li>
<li class="quest"><a class="toltip" href="http://www.blogger.com/"><span class="tooltip"><span class="top"></span><span class="middle">Buku Tamuku</span><span class="bottom"></span></span></a></li>
<li class="follow"><a class="toltip" href="http://www.blogger.com/"><span class="tooltip"><span class="top"></span><span class="middle">Menjadi Sahabatku</span><span class="bottom"></span></span></a></li>
</ul>
SEMOGA BERMANFAAT
JANGAN LUPA DIKOMENTAR