Membuat Tombol Sosial Media Keren Menggunakan CSS3

Dalam kesempatan kali ini taukahbahwa.blogspot.com akan menyajikan berita tentang Membuat Tombol Sosial Media Keren Menggunakan CSS3. Semoga dengan berita Membuat Tombol Sosial Media Keren Menggunakan CSS3 akan menambah wawasan untuk anda pembaca setia taukahbahwa.blogspot.com

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....

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com