Bubblewrap Image Effect



Assalamualaikum , setelah lama menyepi Fyqa kembali dengan tutorial baru yaww . Let's start .

1. Dashboard > Design > Add A Gadget > HTML/Javascript.

2. Copy kod di bawah ke dalam HTML/Javascript tadi .


<style type="text/css">
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
border:0;
margin-right: 12px; /*spacing between each image - boleh adjust*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x - boleh adjust*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
<ul class="bubblewrap">
<li><a href='TARGET URL' target='_blank' title='TARGET NAME'><img border="0" src="URL IMAGE" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></a></li>
<li><a href='TARGET URL' target='_blank' title='TARGET NAME'><img border="0" src="URL IMAGE" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></a></li>
</ul>

3. Tolong ikut yang Fyqa cakap betul-betul k sebab part edit tuu payah sikit nak paham .


  • TARGET URL - (link bila klik ke page lain)    
  • TARGET NAME - (bila hover nanti keluar mesej)   
  • URL IMAGE - (url tempat image yang korang hosting)  



Contoh nanti jadi mcm nih taw .

<li><a href='http://facebook.com/anakmunsyi/' target='_blank' title='pesbuk pesbuk !'><img border="0" width="32" height="32" src="http://www.curbain.be/photo/Facebook-tilted-reflected-logo_000.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></a></li>

4. Kalau nak tambah bubblewrap tuu tambah ja kod nih uke .

<li><a href='TARGET URL' target='_blank' title='TARGET NAME'><img border="0" src="URL IMAGE" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></a></li>
</ul> 

5. Dragkan html tuu dekat tempat yang hangpa nak then save !



Lastly , doakan Fyqa SPM 11A+ (!)

Comments
8 Comments