Widget Image Bubble Menggunakan CSS3

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



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

8 Orang Yang Cerewet:

liputanmadura mengatakan...

MAntap Tutorialnya, thanks

XaOn mengatakan...

sayang gk pas ama template blog ane

Uda cucanto mengatakan...

@Liputanmadura : SIPT
@XAON : THX

indofreeabis mengatakan...

Info bagus....ditunggu kehadiran keblog saya :)

LaNo HTC mengatakan...

Wahh Bagus nih izin coba sob..

Dode-XP mengatakan...

izin coba gan !!

koment back!!

Ladida mengatakan...

keren pasti, ehehee
kalo hovernya ada -moz- lebih baik transisinya juga ada -moz- biar ada efeknya di firefox . .

Cek Info mengatakan...

hmm, keren kk. sy jiplak dulu buat sy pelajari :D

Posting Komentar