Tutorial Image Bubbles Menggunakan CSS3

About this Post :
Post Title	>> Tutorial Image Bubbles Menggunakan CSS3
Date	>> February 25, 2012
Author	>> Mr. Lam3rs
Link	>> http://31337day.blogspot.com/2012/02/tutorial-image-bubbles-menggunakan-css3.html
Labels	>> Javascript

Untuk DEMO dapat sobat lihat disini
Sebelum mengedit template, saya sarankan sebaiknya sobat backup terlebih dahulu template sobat! oke, kita lanjutkan bagaimana cara menerapkannya:

1. Login ke akun blogger sobat
2. Pilih Design » Edit HTML
3. Lalu copy kode berikut dan letakkan sebelum kode ]]></b:skin>

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px;
height: 60px;
border:0;
margin-right: 12px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

4. Cari kode yang mirip dengan kode berikut ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nousisce (Header)' type='Header'/>
</b:section>
</div>

5.Kemudian letakkan kode berikut setelah kode diatas!

<div class='bubblewrap'>
<ul>
<li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkRZT8XHI/AAAAAAAAEpU/boHguF0HbX0/stumbleupon_thumb%5B2%5D.png' title='Add to Stumbleupon'/></a></li>
<li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkLgpPqKI/AAAAAAAAEpE/MoiG31eV3gg/facebook_thumb%5B2%5D.png' title='Add to Facebook'/></a></li>
<li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkJCcKt5I/AAAAAAAAEo8/6LdMi30Ms0o/digg_thumb%5B2%5D.png' title='Add to Digg'/></a></li>
<li><a href='#'><img src='http://lh6.ggpht.com/_7Y9pl24WpQY/TKYkGo-lIBI/AAAAAAAAEo0/v8uQduCj814/twitter_thumb%5B2%5D.png' title='Add to Twitter'/></a></li>
<li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkOKs2gnI/AAAAAAAAEpM/atV8KDhqKcI/rss_thumb%5B2%5D.png' title='Add RSS Feed'/></a></li>
</ul>
</div>

 6. Simpan template sobat dan selesai.

Note: Sobat bisa menganti text yang berwarna kuning dengan url gambar yang sobat punya.

Terima kasih, semoga bermanfaat :)

Sources: http://miscah.blogspot.com/2010/10/tutorial-image-bubbles-menggunakan-css3.html