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/AVvXsEgaEnVtcIr8tH3MMQmA-shWONeqPmyXgVKtC16gMlsrGGy2GePgWl38cDfpH7M4Z726OBQQ-u6HwBYXgMae0Jb0kCkOTXNpX8kJxAhhm4RbSeyK-v8ir_CAW7daiF3jDD-1OF5-Y8nK6ztM/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/AVvXsEgtX4ZVHqmxRcSXBcxg_WG2QN03CrU3iFeAj2C0hGtPDzhhemHDbFzmxOARldNdIr0K8A_zZLuLWeCr5nz1VWxvlkmPjb8n14NDMdKJ_h-i7gj3FMGwPc6g_VUe6YUhFsfCMODvrSx8Z78E/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/AVvXsEiUWM-CWNotKBs5Pk2C36bOzQ6HZ3meva-bbJqP1wmDrFJoIQDYUsMbO7fVDY0vZEN-ig4aEpmK9T8yLusKBgTtGoroysw5Zp-5pj8ou-rzs8_jv9uoeZXk4RMlxLTWpqwBrMuFr1bVNuDt/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/AVvXsEipbQHreR7nXo5uAWqi7BXZhfdXFsRepnDRhFqjuq5G_BZfrmoo7YYLGoktyqQvAFsxhdzN2tCoDSA2Jb73Xgs6-tHLLCPJWdmLY-KuyGzEgEk7SXz0-4a54wNFI2HAEFwJh50KF68k5YXp/s128/rss.png"
alt="Add RSS Feed" /></a></li>
</ul>
Tidak ada komentar:
Posting Komentar