Metro Style Small Social Widget For Blogger

6/23/2013 CSS , Metro Style , Widgets 0 Comments

Intall It Into Blogger

<style>
.behance-mini,
.dribbble-mini,
.facebook-mini,
.flickr-mini,
.forrst-mini,
.linkedin-mini,
.pinterest-mini,
.tumblr-mini,
.twitter-mini,
.vimeo-mini{
background:url(http://3.bp.blogspot.com/-k0L0CSRkZhM/UcAwmNdOMCI/AAAAAAAAA4M/K7BVM6qTt6c/s1600/social-mini.png) no-repeat;
width:30px;
height:30px;
margin-right:0;
display:inline-block;
transition:background 0.3s;
-moz-transition:background 0.3s;
-webkit-transition:background 0.3s;
-o-transition:background 0.3s;
}
.behance-mini{
background-position:0 0;
}
.behance-mini:hover{
background-position:-30px 0;
}
.dribbble-mini{
background-position:0 -30px;
}
.dribbble-mini:hover{
background-position:-30px -30px;
}
.facebook-mini{
background-position:0 -60px;
}
.facebook-mini:hover{
background-position:-30px -60px;
}
.flickr-mini{
background-position:0 -90px;
}
.flickr-mini:hover{
background-position:-30px -90px;
}
.forrst-mini{
background-position:0 -120px;
}
.forrst-mini:hover{
background-position:-30px -120px;
}
.linkedin-mini{
background-position:0 -150px;
}
.linkedin-mini:hover{
background-position:-30px -150px;
}
.pinterest-mini{
background-position:0 -180px;
}
.pinterest-mini:hover{
background-position:-30px -180px;
}
.tumblr-mini{
background-position:0 -210px;
}
.tumblr-mini:hover{
background-position:-30px -210px;
}
.twitter-mini{
background-position:0 -240px;
}
.twitter-mini:hover{
background-position:-30px -240px;
}
.vimeo-mini{
background-position:0 -270px;
}
.vimeo-mini:hover{
background-position:-30px -270px;
}
</style>
<center>
<div id='footer-social'>
<a href='#'><span class='behance-mini'></span></a>
<a href='#'><span class='twitter-mini'></span></a>
<a href='#'><span class='facebook-mini'></span></a>
<a href='#'><span class='linkedin-mini'></span></a>
<a href='#'><span class='pinterest-mini'></span></a>
<a href='#'><span class='dribbble-mini'></span></a>
<a href='#'><span class='vimeo-mini'></span></a>
<a href='#'><span class='tumblr-mini'></span></a>
<a href='#'><span class='flickr-mini'></span></a>
</div>
</center>

• Now change the red highlighted with your links.