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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8wAORyVJszRyDt_6RwsPb7TegHp8FXdpGCvu_DbMDwWibRQAQozgCPg_GgVuLYg5GJ7VS2BcedfjVb17dc4EPi6I2A91SsaB-W3X0BdLKDoUG_6KM6D4-DMLpGesB3fyotvrLSgVtgnI/s1600/stumbleupon.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHlxF1dh1AjbgHAO_4F2ifLU8oJkZ9-6uLzElsRrwi_etkIZ9wIZ-P1SHXIhRlsSgxlC3KKnWp-j9ofNNoQUiYnpnTm9uAHnaNhK6LRoy5NDhloLLFspMiUGVkrJmtGSrOg26QfzQEgKA/s1600/facebook.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8GY7JOXwPUw0iwiRZdFWONb9qlmTfU8TypQg6kJi5ZQNJW2iSHeltDCOCc33MuFMJ9mUVw1GF1WJzcUWcaevpR-rhhI2Tt0F8g4lQQPUc38gz7JKoMDxzZavvcBgbU1U6ntTsHqJKk9o/s1600/digg.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyzF2cQboY4eE8TwCOCPBRughzTqWzWMWb3uZCdjNkiCd44C1A-2M93NBU_wYT4OJ_KUQMBlYtOUQF1SP2VPHszcDnkoGJ4vaNmQ06Gsckz_Od55sS4sNoQ9xvlsmaRHP1Zi04_TYTYO8/s1600/twitter.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO8Mn97pyQbhmCVhGl0RFWKYXmZJrg0uMl9OJlYpyV4Oh0SV_t8jOY85FB3Qcz0bfCb-kH15HzG_bEl7EUphvPL3K478l6B7ETr1uPHX4XXQb_8J6utWqQYQrMtnUn3qZvb0zQTBRAlto/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 . .