Widget Image Bubble Menggunakan CSS3

Apa Itu Image Bubble?Bagi Yang Belum Tahu Apa Itu Image Bubble Mungkin Contoh Dibawah Ini Dapat Membantu!

DEMO DISINI

Dari Contoh Diatas Anda Dapat Menyimpulkannya Sendiri!

Untuk Membuatnya :

Langkah 1

Copy CSS Dibawah

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-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*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

Paste Diatas Kode ]]></b:skin> (Rancangan-Edit HTML)

Langkah 2

Copy Script Dibawah

<ul class="bubblewrap">

<li>
<a href="http://tentangduniadanweb.blogspot.com/"><img src="http://icons.iconarchive.com/icons/iconshock/social-media-beakers/128/stumbleupon-icon.png" title="Add to Stumbleupon" /></a></li>

<li><a href="http://tentangduniadanweb.blogspot.com/"><img src="http://icons.iconarchive.com/icons/iconshock/social-media-beakers/128/facebook-icon.png" title="Add to Facebook" /></a></li>

</ul>

Paste Di HTML/Javascript (Rancangan-Tambah Gadget-HTML/Javascript)

Selesai

Keterangan
Warna Merah : Alamat Blog Kalian
Warna Biru : Alamat Gambar