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+ (!)