Tombol CSS3 Jaringan Sosial Dengan Pink Girly Style

Tombol CSS3 Jaringan Sosial Dengan Pink Girly Style

Dalam posting ini, saya akan mempresentasikan tentang ikon sosial dengan efek bubble untuk blogger Anda. Anda dapat terhubung dengan profil sosial Anda dengan tombol ini. Anda dapat memeriksa gadget media sosial sebelumnya dari tautan di bawah ini.

Media sosial

DEMO

1. Masuk ke akun blogger dan masuk ke Design >> Edit HTML

2. Temukan tag ini dengan menggunakan Ctrl   F]]> </ b: skin>

3. Paste di bawah kode Sebelum ]]> </ b: skin> tag

/ * Bloggertrix * / 
.bubblewrap { 
list-style-type: none; 
margin: 0; 
padding: 0; 
} 

.bubblewrap li { 
display: inline; 
width: 65px; 
height: 60px; 
} 

.bubblewrap li img { 
width: 55px; . / * Lebar masing-masing gambar * / 
height: 60px; . / * Tinggi setiap gambar * / 
border: 0; 
margin-right: 12px; / * jarak antara setiap gambar * / 
-webkit-transisi: -webkit-transform 0.1s kemudahan-in; / * bernyawa mengubah properti * / 
-o-transisi: -o-transform 0.1s kemudahan-in; / * bernyawa mengubah properti di Opera * / 
} 

.bubblewrap li img: hover { 
-moz-transform: skala (1,8); / * meningkatkan citra 1.8x * / 
-webkit-transform: skala (1,8);
-o-transform: skala (1,8); 
}

4. Pergi ke blogger  Desain > Elemen Halaman.

5. Klik Add Gadget dan pilih 'HTML / Javascript

6. Paste kode di bawah ini.

<center> 
<ul class = "bubblewrap"> 
<li> <a href="http://www.stumbleupon.com/stumbler/soharox/"> <img src = "http: //1.bp.blogspot. com / -895943oNv3Y / UEzCpIO30ZI / AAAAAAAADrA / I237B0gig_4 / S1600 / bloggertrix.com-StumbleUpon.png "title = "Tambahkan ke Stumbleupon"/> </a> </ li> 
<li> <a href =" https: // www.facebook.com/bloggertrix"><img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZmrbu0t2Tx_FbIub76RGZ1Jw1W6ifC1eYTyXFCh8uHH9ab1Rd6L5NpUd0gjtJ39Ghavukwc04NecQF0eWPeM4qr_TSXZ90430WYWIcVE9GAzjoFj7858vKNcE8MkjYyGTzhqLqoE-PKo/s1600/bloggertrix.com-Facebook.png" title = "Tambahkan ke Facebook "/> </a> </ li> 
<li> <a href="http://www.digg.com/"> <img src =" http://3.bp.blogspot.com/- Bp7wbvOSk7o / UEzClYkWSrI / AAAAAAAADqo / VPWqyaJadw8 / S1600 / bloggertrix.com-Digg.png "title ="Tambahkan ke Digg"/> </a> </ li>
<li><a href="http://www.twitter/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU3shiBHBnDKKw1aCn6aEZpywzWd56B89dlZa1oJOhTRnaLckyXsvaQKWWfZwZ51RfIA95zdG9NhDX3zjRnVVe18Tq_X-qEGmAU-f9UTsGqZd8ZGmlAC6jUDNlHKbps5-sPA9UHpV_zLA/s1600/bloggertrix.com-Twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBiJaSWqrKC5L5gsyMVnX4zY9ZTJtTa0qlgvxyvdZcuZbIiXiZuIZBiOAQDDvKa0cEL8_3j1hDuch3vnJXAjjsVMExPErWf3pJYDl8JVkoPlglW6QyK2F5V3zREsZuVYJiDSz-FYFM8NU/s1600/bloggertrix.com-RSS.png" title="Add RSS Feed" /></a></li>
</ul>
</center>

Ganti dengan link Anda.

7. Sekarang simpan Anda HTML / Javascript'.
    Kamu selesai...