Image Bubbles using CSS3 transform and transitions

Saya kira untuk tutorial kali ini masih berhubungan dengan Css3 yang sebelum nya pernah aku bahas Untuk melihat contoh coba klik disini untuk cara membuat nya

1. login ke blogger
2. masuk kerancangan >>edit htmll
3.  Cari kode ]]></b:skin> lalu tempat kan kode css berikut tepat di atas kode ]]></b:skin>
berikut kode css nya
<style type="text/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); } </style>
4. Save

dan untuk cara penempatan kode html nya gunakan kode berikut

<ul class="bubblewrap">
<li><a href="#"><img src="http://dynamicdrive.com/cssexamples/media/stumbleupon.png" title="Add to Stumbleupon" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="http://dynamicdrive.com/cssexamples/media/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="http://dynamicdrive.com/cssexamples/media/digg.png" title="Add to Digg" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="http://dynamicdrive.com/cssexamples/media/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="http://dynamicdrive.com/cssexamples/media/rss.png" title="Add RSS Feed" /></a></li>
</ul>

Keterangan ganti teks yang berwarna merah dengan gambar esukaan sobat
                   ganti teks yang berwarna biru dengan alamt link shobat yang di tuju....selamat berkarya