Image Buble with CSS pada blog Posted by DSILAS , Monday, June 6, 2011 at 8:01 AM, in Labels: Image Buble with CSS pada blog

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. 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);}

Simpan template........

Cara pemanggilannya 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/AVvXsEhZiO36XkG4cAFBytP_mKs-2Uz3f00d92iG-8NsDqpkqsnTQ5iS9pTuCS0G9j1v2s72FnXIfNgffpovrb3TlU47bSVpmXV8Eoor57-ZuYQ9srW1d-x8r4ntTVV6NbI4w7GV5uR4ibaWbLM/s1600/stumbleupon.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6i0Xx2a2fooAHHiGBRa1FxYILchjSAWrAY_dozRlQ9NMlY7P359PiYZVpJs-UvJGiz1nsUob4yoZ07gcCal7rX_Wr1LcVT3hMwfjaE4S2ItbWKYXtRYDu-vJctr6SNYQ6HLv1wywKOiw/s1600/facebook.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzgd5LIVXkVxHkES_7Adr8Nokt6OUyBx9qkLnLJbvRguwrkS8moI8A7YrZeZIZZSafgs6Ks5One28LxvUqQmI6OIrBd5m4puIBVG6QaKCBYX342U2fvPratCrJsnY-OhaXv5GM5zgMJyY/s1600/digg.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXwjAeQwG7UgCzmR3B_60DB-vx8tyLW33Vc80gRHxdjweHkLf4GiZCvStIzhr1m7LNdUgLcExMrtIIjqYgEebpSf_aQo1eM2xsN-fQYtVbUfaEHJm_2tGjy9hFzxRdOi8Ep1ZCjLL0t-0/s1600/twitter.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVNjngYDQRq07bsbJxqhYfO8MtfNR6QB0RJxkGDX5Q72fdIzKljjdmfiZuJzQ63SwDlMLOpyU32P9SrkmFGF895o_EEP9HjobqMxmKVmCMdbZJkurvEhbQFbYKGE1W_kBwwBzBTOxqsx8/s1600/rss.png" /></a></li>
</ul>

Simpan..........dan selesai