Add Metro Style Social Buttons In Blogger ~ The Next Generation Blog

Home » DOWNLOADS » Add Metro Style Social Buttons In Blogger

Add Metro Style Social Buttons In Blogger

Hi friends, today, I'm going to tell you the method to add metro style social buttons with the use of CSS3 in blogger. So, let's start:
> Login to your blogger account and go to Layout and click Add A Gadget.
> Now, copy the following code and paste it in the content box:

<style>
/* www.ashutoshthehacker.blogspot.com */
.Ashutosh-bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.Ashutosh-bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.Ashutosh-bubblewrap li img{
width: 40px; /* width of each image.*/
height: 40px; /* 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 */
}
.Ashutosh-bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
<ul class="Ashutosh-bubblewrap">
<li><a href="https://www.facebook.com/#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkJpokoTTbTsYU1EnmXE2Hqtu3rZHHu8ZJnWQgPNvRr2XE_P7cOrnEMAN112LiNkDZeGTJyD0E6p81glZY-wEzNFaWwXUizYE6RCHRxQuKWwoVJH8J5OtDnvbI9-gVOuRsW7P1K0VCMzk/s1600/facebook+tng.png" title="Follow Us on Facebook" /></a></li>
<li><a href="http://www.twitter/#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCj2_Gihw092CN9jziuuM3gPaT5jVLKp4S5GiaiSLzptPjuWtbuSNpvoDPqEPBMk6oO-92rwyIZYT0HiT56dXOuaKLCsAYuHR6RFGvat99YswMKL7tDbGz7Us1cMeVywHX8cav8MlMCos/s1600/twitter+tng.png" title="Follow Us on Twitter" /></a></li>
<li><a href="https://plus.google.com/#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiufMDdOEC1jvKzX9ZDRLKph8ig8_E4zAbCNpp6M7bCtGL2W3uv1Hawyha9iTZrnh_iAqvg83-z6j5FYLiRARLygoLS5pGBFAifEvGcv1Of3_kpUJI7YIGk2mJFvkY8ybQ_ZJIYkYuirac/s1600/google+tng.png" title="Follow Us on G+" /></a></li>
<li><a href="http://www.youtube.com/#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr5VWtic-poEgboHSr_w0mItUMCwVP2WE6URlCLWwTRMzJRlmntrY-s8HO2FMZUF2ot2vEuSYV1IWtnxXYVqme4NOBy840KgRNBD0cwL3hX3qevWSZJYZVsBUzaaS4rp31pB7Zs79g2P4/s1600/YouTube+tng.png" title="Subscribe Us on Youtube" /></a></li>
<li><a href="http://feeds.feedburner.com/#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8djMeW4AvXa5Eh8Oc3sQ22cPc3ZCvnuaqRQ40OEa5RwdtagEoNHyWtijtkT5LyjBWy0aRkwAzAie9djZffZYRcKIZmgpBu5funDccf2-JGVCUskQC8L5G4yzK56T9w56JmpJva1Kga8E/s1600/rss+tng.png" title="Subscribe Us on RSS Feed" /></a></li>
</ul>

> Now, save and see the result.
See The Demo Below: