Left Rocket Dock Menu ini tampil melayang disebelah kiri Blog, Ane coba buat 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"
Kode CSS :
Selamat mencoba Semoga Berhasil...!!!
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"
Kode 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)
}
Kode HTML}
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)
}
<ul id="lefdock">
<li class="home"><a class="toltip" href=""><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=""><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=""><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=""><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=""><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=""><span class="tooltip"><span class="top"></span><span class="middle">Menjadi Sahabatku</span><span class="bottom"></span></span></a></li>
</ul>
Pemasangannya ;<li class="home"><a class="toltip" href=""><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=""><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=""><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=""><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=""><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=""><span class="tooltip"><span class="top"></span><span class="middle">Menjadi Sahabatku</span><span class="bottom"></span></span></a></li>
</ul>
- Masuk ke Blog sobat Pilih Elemen Laman
- Klik Tambah gadget HTML/javascript
- Pastekan kode diatas ganti Urlnya dengan blog sobat
- Klik simpan dan lihat hasilnya
Selamat mencoba Semoga Berhasil...!!!
- Berandaku Disini
- Daftar Isi Blogku
- Kenal Aku Lewat Facebook
- Twiterin Aku Dong
- Buku Tamuku
- Menjadi Sahabatku
Posted On : 27 Februari 2012 Time : 21.03