ini adalah menu dimana saat di arahkan menggunakan kursor akan memberikan efek bubble
dan menu ini melayang disebelah kiri Blog, Ukuran dari menu ini cuma 3kb, jadi tidak terlalu membebani loading blog, silahkan melihat demonya DISINI
"Note : Not Support dengan browser internet explorer"
Gimana tertarik ga ? kalau tertarik ikuti langkah dibawah ini
1. log in ke blogger
2. Klik Rancangan -> Edit HTML -> centang Expand Widget Template
3. carilah code </body> (tekan F3 untuk memudahkan pencarian) kemudian copylah code dibawah ini
4. paste di atas code </body><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://i1193.photobucket.com/albums/aa358/crozzye/bubble.gif) no-repeat top;}a.toltip:hover span.middle{display:block; padding:0 8px;font:12px Verdana;background:url(http://i1193.photobucket.com/albums/aa358/crozzye/bubble_filler.gif) repeat bottom;}a.toltip:hover span.bottom{display:block; padding:3px 8px 10px; color:#548912; background:url(http://i1193.photobucket.com/albums/aa358/crozzye/bubble.gif) no-repeat bottom;}ul#bubble{position:fixed;left:-140px;top:35%;transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg);-o-transform:rotate(90deg);}ul#bubble li{width:60px;display:inline;float:left;border:0}ul#bubble 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#bubble li a:hover{background-size:100px 100px;opacity:1;margin-top:-30px;}ul#bubble .home a{background-image:url(http://i1193.photobucket.com/albums/aa358/crozzye/home1.png)}ul#bubble .smaluchi a{background-image:url(http://i1193.photobucket.com/albums/aa358/crozzye/smaluci.png)}ul#bubble .fesbuk a{background-image:url(http://i1193.photobucket.com/albums/aa358/crozzye/icontexto_user_web20_facebook.png)}ul#bubble .twit a{background-image:url(http://i1193.photobucket.com/albums/aa358/crozzye/twitter_godtwitter.png)}ul#bubble .daftar a{background-image:url(http://i1193.photobucket.com/albums/aa358/crozzye/daftarisi.png)}ul#bubble .About a{background-image:url(http://i1193.photobucket.com/albums/aa358/crozzye/about.png)}ul#bubble .Download a{background-image:url(http://i1193.photobucket.com/albums/aa358/crozzye/download-1.png)}</style><ul id="bubble"><li class="home"><a class="toltip" href="LINK ANDA"><span class="tooltip"><span class="top"></span><span class="middle">Home</span><span class="bottom"></span></span></a></li><li class="smaluchi"><a class="toltip" href="http://www.sman3cmi.sch.id"><span class="tooltip"><span class="top"></span><span class="middle">SMAN 3 Cimahi</span><span class="bottom"></span></span></a></li><li class="daftar"><a class="toltip" href="LINK ANDA"><span class="tooltip"><span class="top"></span><span class="middle">Daftar Isi</span><span class="bottom"></span></span></a></li><li class="fesbuk"><a class="toltip" href="LINK ANDA"><span class="tooltip"><span class="top"></span><span class="middle">Facebook</span><span class="bottom"></span></span></a></li><li class="twit"><a class="toltip" href="LINK ANDA"><span class="tooltip"><span class="top"></span><span class="middle">Twitter</span><span class="bottom"></span></span></a></li><li class="About"><a class="toltip" href="LINK ANDA"><span class="tooltip"><span class="top"></span><span class="middle">Tentang gw</span><span class="bottom"></span></span></a></li><li class="Download"><a class="toltip" href="LINK ANDA"><span class="tooltip"><span class="top"></span><span class="middle">Download</span><span class="bottom"></span></span></a></li></ul>
note : - untuk tulisan yang berwarna MERAH itu diganti dengan link anda masing masing !
- untuk tulisan yang berwarna UNGU itu diganti dengan tulisan anda masing masing !
5. klik simpan
6. Enjoy :D
0 Comments
