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.
Photobucket
Langkah langkah membuatnya :
  1. Masuk ke blog sobat 
  2. Pilih Elemen Laman
  3. Klik Tambah Gadget HTML/javascript
  4. Pastekan kode dibawah ini
  5. Jangan lupa ganti kode yang berwarna biru dengan URL blog sobat
  6. Untuk mengatur posisinya utak-atik pada kode position:fixed;left:-140px;top:35%; 
<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> 
Sumber : http://cuerosbhelatos.blogspot.com/2012/02/css-left-rocket-dock-menu_27.html

SEMOGA BERMANFAAT
JANGAN LUPA DIKOMENTAR

Arsip Blog

Ayat Alkitab

Friend's Banner

Copyright © 2013 David As'Chri ChieLietonga 06 | Robotic Notes | Powered by Blogger

Designed by : Johanes Djogan | Redesignde by : David As'Chri ChieLietonga 06: CSS Left Rocket Dock Menu