Home » » Image Buble With CSS

Image Buble With CSS



Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :
/* Buble Image with CSS
----------------------------------------------- */
.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);}

8. Save

9. Cara penggunaannya Simpan kode berikut pada postingan ataupun Html/ java script pada gadget :

<ul class="bubblewrap">
<li><a href="#"><img src="https://lh3.googleusercontent.com/-oD0uNs-QHXk/TXGC8jiDbCI/AAAAAAAAATA/1d_NCCNRFvg/s1600/stumbleupon.png" /></a></li>
<li><a href="#"><img src="https://lh5.googleusercontent.com/-Y3ccfdZGdpw/TXGCwECXrVI/AAAAAAAAASs/I6UTfM8u-hc/s1600/facebook.png" /></a></li>
<li><a href="#"><img src="https://lh5.googleusercontent.com/-336bl0qpyX8/TXGCsPT3CRI/AAAAAAAAASk/LoxpjpvHMHM/s1600/digg.png" /></a></li>
<li><a href="#"><img src="https://lh5.googleusercontent.com/-KA8ApJ8PTSc/TXGDA8N0-EI/AAAAAAAAATI/k9M1LRQJUlU/s1600/twitter.png" /></a></li>
<li><a href="#"><img src="https://lh4.googleusercontent.com/-ldqJuBEohZ4/TXGC2a_1JRI/AAAAAAAAAS4/l7p45z-yBQw/s1600/rss.png" /></a></li>
</ul>
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .