-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet

Image Buble with CSS pada blog

Demonya bisa dilihat disini




    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/AVvXsEixDUcfgMAVs5nYMORw9EX_7-IpAEjtRSWAUKIkqzwUtOE0HMzepsoTyryZO3jwk22fLnQ7QZve-DGLQmQ4ZyWOD8nVkQG_35z5J0V-2oFHovlFxMHwXJwX6rRuZlrwr4IugllYm9kifgM/s1600/stumbleupon.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_Qmp36tUhJY8dYIYHLIHXErF4WNy8Mp1TpCpNDGdOAhAo2n7RC3gg_iwflXeTd-rBKBnOzrkpq1RfTsr4uwm_dMxQT9wEQe04-jeks6gLJ811aUeLTaZLMGisNfVO9ZslI0Z2KeKcK8/s1600/facebook.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3VpP1uPAfHKUy1sI8L5wp7I-euiDID4jhyphenhyphen4bth1NVoeCZ86dC6a_gY71NEXDlvwnbJkAEmrRvHSgFqAk9XkqNz_lwWUCTjDWWvA0KdMYndhVOhLrD0n4C7j7oRYHkK_-GnU5yKsTx_EM/s1600/digg.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7n8gwIz-RL3S6vb48O4wZlEmW_oyHXNJyGIo_PkTEhhCJa8_7TdQ6rH6zF9-iHyIiq5XtyI-ZmA1bCS4VCB1-dm5ccitUHIfDlNlHhg4JqsZOa323FzFfclD9NmFoqRLGfjZfZ9DXThU/s1600/twitter.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJtNscGrmjv4v9wbMv0iPp1xnJJx_MKbR-2oGXqeiRRf-pz5dp51gJOx2FFt4uh84nt02InKi3Xv-b1Fx6FgcX9vhPbbWW2V058H1rh8SziObPHu_PhlAMRmEzFNT8t8vBBFPhQqyNJCk/s1600/rss.png" /></a></li>
</ul>

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

Leave a Reply