CSS3 Social Network Buttons With Pink Girly Style

In this post, im going to present about social icons with bubble effect for your blogger.you can link with your social profile with this buttons.you can check my earlier social media gadgets from below link

Social media

DEMO

1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></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; /* 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);
}

4. Go to blogger  Design > Page Element.

5. Click Add Gadget and select 'HTML/Javascript

6.Paste below code.

<center>
<ul class="bubblewrap">
<li><a href="http://www.stumbleupon.com/stumbler/soharox/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAktV9QjV8UUJyOG0GG9EvUf1V_C2P-Ut2qAbgOOQREd7ZF78t4W-HkJo3xTfLUTuklXjXoZeGqtWUnMvDRWpPzk-5vbNINoD3I3cX06873_fSpgmDNPDHwKKWzGeoJmsJiCA1KNq8GdM/s1600/bloggertrix.com-StumbleUpon.png" title="Add to 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="Add to Facebook" /></a></li>
<li><a href="http://www.digg.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjykMVzj5_h_hCzmfgmoSOt1omsu9Ot2YUc6F4KJ4tasydFiqPFZBOlMsNaEfn7pbMh7dmMu57jJpWMl40N1T7vL40o-1pH5W-KhC9YoKymkg0w1-Vi6DlUIZie4HMC1k0e_L534OciJaY/s1600/bloggertrix.com-Digg.png" title="Add to 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>

Replace with your links.

7. Now save your HTML/Javascript'.

    You are done...