CSS3 Social Network Buttons

In this tutorial, I'll show you how to create CSS3 social network subscribe buttons. 

Follow these steps precisely:

1. Go to your layout in Blogger dashboard.
2. Click on add new gadget
3. Locate add HTML/JavaScript code in the pop-up window.
4. Copy, Paste and save the code below into the editor that appears and save.

<style>
/* BthemesandTricks */
.socialicons{
list-style-type:none;
margin:0;
padding:0;
background: #f0f8ff;
width: 350px;
}
.socialicons li{
display:inline;
width: 60px;
height:60px;
}
.socialicons li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*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 */
}
.socialicons li img:hover{
-moz-transform:scale(0.8); /*scale up image 1.8x*/
-webkit-transform:scale(0.8);
-o-transform:scale(0.8);
}</style>

<br />
<center>
<br />
<ul class="socialicons">
<li><a href="http://www.plus.google.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Google-Plus-icon.png" title="+1 us on Google Plus" /></a></li>

<li><a href="http://www.facebook.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Facebook-icon.png" title="Like us on Facebook" /></a></li>

<li><a href="http://www.pinterest.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Pinterest-icon.png" title="Follow on Pinterest" /></a></li>

<li><a href="http://www.twitter/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Twitter-2-icon.png" title="Follow on Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/RSS-icon.png" title="Subscribe to our feed" /></a></li>

<li><a href="http://linkedin.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Linkedin-icon.png" title="Connect with us on Linkedin" /></a>
</ul>
5. Change the "#" sign to your username.
6. Enjoy! 

Demo

• 
• 
• 
• 
• 
•