Bila kursor muose diarahkan pada menu icon diatas, maka gambar menu icon akan berubah bentuk menjadi besar.
-Desain
- Tata letak
- Add Gadget
- HTML/javascript
copy paste script kodenya dibawah ini :
Script kode
Script kode
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7
and less*/
*display:inline; /*For IE7 and
less*/
position:relative;
width: 65px;
height:60px;
}
.bubblewrap li img{
position:absolute;
width: 55px; /*default width of each
image.*/
height: 60px; /*default height of
each image.*/
left:0;
top:0;
border:0;
}
.bubblewrap .tooltip{ /*CSS for
image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}
/*by www.kikiyo.co.cc*/
#orbs li{
width: 65px;
height:60px;
}
#orbs li img{
width: 55px;
height: 60px;
}
#squares li{
width: 45px;
height:40px;
}
#squares li img{
width: 31px;
height: 31px;
}
</style>
<script
type="text/javascript"
src="http://wwwkikiyococc.googlecode.com/files/imgbubbles-by-www.kikiyo.co.cc.js">
/***********************************************
* Script code by www.kikiyo.co.cc
dont change this
***********************************************/
</script>
<script
type="text/javascript">
jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.75})
//by www.kikiyo.co.cc
$('ul#squares').imgbubbles({factor:2.5})
//by www.kikiyo.co.cc
})
</script>
<ul id="orbs"
class="bubblewrap">
<li><a href="http://www.facebook.com"
target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5uHVzWuEOGMKRy08v-aKiJxnIrXzBj_YVXl2rrsYIm91tcEqUDNg8texaypOtJfrv53z00zGYrQEwdh8sG6ZKjbXHqN3978xMyUktXt5rgcfYx0U-ze2G4-87xuorUOXuZ_-lAVDZ8ALb/s128/facebook.png"
alt="Add to Facebook" /></a></li>
<li><a href="http://www.digg.com"
target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNIpmM-BNnf7VbnMdCQGcZ4gie0Ay__5d2uGQJZ00e79ykcESh-HGla3lG0whxxx9uvDLMhNhhGXgek1izHw0-zWNiwOG7ElJ7QgnE9nW3NAqdcDAEI72T-z3uSlCi_4gdWE1OdkTACre2/s128/digg.png"
alt="Add to Digg" /></a></li>
<li><a href="http://www.twitter.com"
target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinR13tGXFG6iGLgQmMmYzwFI3JehqvW0PqoK1ZFVFgZdPBW7x2VeAaoFiWvQcLDdgJ_QEowfPUj1u0ZI_BLL8L6zqqg1bbj1CAMts-xtxTx5YdI_aVCfTNSv5mODKxHwDPHo2l1iKBaiNl/s128/twitter.png"
alt="Add to Twitter" /></a></li>
<li><a href="http://www.rss.com"
target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigMpWpEOYYvxH-qutuj1Yl3Mc1s04LS1OgpFJHUrcg3Nq_4XH8df7-r9pso4ASIvc6Onuf2RfQZShJMckFN0fzVCb02DvhZCoKpOLC8NZKrSON92iFx9fwKz7bygTm4tc_yWnKAx5GQnKq/s128/rss.png"
alt="Add RSS Feed" /></a></li>
</ul>
