Membuat Tombol Sosial Media Keren Menggunakan CSS3

Pada postingan ini saya saya akan share tentang bagaimana cara menambahkan tombol sosial media keren di blog menggunakan CSS 3 caranya sangat mudah gan dan agan patut mencobanya hehe...

baikalah gan lansung saja pada langkah langkahnya..

Masuk blog agan
pilih menu template/edit html
cari kode ]]></b:skin> gunakan ctrl + f untuk memudahkan pencarian
jika sudah ketemu lansung aja letakan kode dibawah ini tepat diatas tag ]]></b:skin>

.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);
}

Setelah itu silahkan save template anda terlebih dahulu
kemudian kita beralih ke munu tata letak/add gadged
lalu letakan kode dibawah ini pada box yang tersedia

<center><ul class="bubblewrap">
<li><a href="Kode agan disini "><img src="http://img42.imageshack.us/img42/7086/stumbleuponlj.png" title="Add to Stumbleupon" /></a></li>
<li><a href="Kode agan disini "><img src="http://img253.imageshack.us/img253/835/facebookv.png" title="Add to Facebook" /></a></li>
<li><a href="Kode agan disini "><img src="http://img832.imageshack.us/img832/5893/twittermx.png" title="Add to Twitter" /></a></li>
<li><a href="Kode agan disini "><img src="http://img4.imageshack.us/img4/2004/rssqn.png" title="Add RSS Feed" /></a></li>
</ul>
</center>

Catatan : Silahkan sesuaikan kode berwarna merah dengan kode sosial media anda



Jika sudah silahkan simpan template agan dan lihat hasilnya...

Selamat mencoba tombol sosial media barunya semoga bermanfaat....