Awesome CSS3 Social Profile Widget with Zooming and Shrinking Effect

Metro UI Widgets Are getting Popular Nowadays . But , Unique Ones Are Still Very Rare . We All Know THat If You Want Professionalism , We Want Uniqueness In Both Posts And Widgets And Even The Design . We Have Already Designed Another Unique Widget Which Has Become Very Popular now . It Is The Metro UI Social Profiles Widget . But This Widget Is An Animated CSS3 Social Profiles widget With Cool And Awesome Zooming And Shrinking Effects . This Widget Is Created With CSS And HTML , So No Worries On Page Loading Time .To Make A Stable And Reliable Readership , You Have to Contain Good , Unique And Awesome Content In Your Blog . This Enables The Readers To Subscribe To Your Blog So That They Get Your Blog's New Published Content Straight To Their Mail Box . So This Widget Contains A Facebook , Twitter , Google+ And RSS Feeds Social Profiles . So It All In One Social Profiles Widget With Awesome CSS3 Effects .

STEPS

1 . Go To Blogger - Layout - Add A Gadget - HTML/Javascript
2 . Now Copy The Code Below With Necessary Changes

3 . Thats All ! Now Save The Template And Enjoy !

Source Code

<style>
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
5px 4px;
color:#9
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px
 79797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ght:nor
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-we
imal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/*****************fb*****************/
px;
overflow
.envy-menuf{
padding: 0;
width:100%;
color: #fff;
margin: 1px auto;
}
.envy-menuf li{
width: 100%;
height: 7
5: hidden;
display: block;
background: #017CD4;
color: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 300ms ease-in-out;
-moz-transition: all 300m
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-transition: al
ls ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
lock;
width: 100%;
height:
.envy-menuf li:last-child{
margin-bottom: 2px;
color: #fff;
}
.envy-menuf li a{
text-align: left;
text-decoration:none;
display: 
b 100%;
color: #fff;
position:relative;
}
.envy-contentf{
color: #fff;
position: absolute;
left: 12px;
width: 100%;
height: 100%;
top: 10px;
}
.envy-mainf{
300ms linear;
tr
font-size: 20px;
color: #fff;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all
 ansition: all 300ms linear;
}
.envy-subf{
font-size: 14px;
color: #fff;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
r: #fff;
}
.envy-menuf li:hover 
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.envy-menuf li:hover{
background: #1f69b3;
col
o.envy-iconf{
text-shadow: 0px 0px 1px ;
font-size: 50px;
color: #fff;
}
.envy-menuf li:hover .envy-mainf{
font-size: 14px;
color: #fff;
}
.envy-menuf li:hover .envy-subf{
eight: 75px;
color: #fff;
font-size: 30px;
}
/*****************tw*****************/
.envy-menut{
padding: 0;
width:100%;
color: #fff;
margin: 1px auto;
}
.envy-menut li{
width: 100%;
h
overflow: hidden;
display: block;
background: #00BFFF ;
color: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
transition: all 300ms ease-in-out;
trans
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms
-ition: all 300ms ease-in-out;
}
.envy-menut li:last-child{
margin-bottom: 2px;
color: #fff;
}
.envy-menut li a{
text-align: left;
text-decoration:none;
display: block;
width: 100%;
height: 100%;
: all 300ms 
color: #fff;
position:relative;
}
.envy-contentt{
color: #fff;
position: absolute;
left: 12px;
width: 100%;
height: 100%;
top: 10px;
}
.envy-maint{
font-size: 20px;
color: #fff;
-webkit-transitio
nlinear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.envy-subt{
font-size: 14px;
color: #fff;
i:hover{
background:#0CA8F0;
color: #
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.envy-menut 
lfff;
}
.envy-menut li:hover .envy-icont{
text-shadow: 0px 0px 1px ;
font-size: 50px;
color: #fff;
}
.envy-menut li:hover .envy-maint{
font-size: 14px;
color: #fff;
}
.envy-menut li:hover .envy-subt{
color: #fff;
nd: #da4a38;
col
font-size: 30px;
}
/*****************g+*****************/
.envy-menug{
padding: 0;
width:100%;
color: #fff;
margin: 1px auto;
}
.envy-menug li{
width: 100%;
height: 75px;
overflow: hidden;
display: block;
backgro
uor: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-bottom: 4px;
-webkit-transition: all 300ms ease-in-out;
f;
}
.envy-menug li a{
text-align: left
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.envy-menug li:last-child{
margin-bottom:2px;
color: #f
f;
text-decoration:none;
display: block;
width: 100%;
height: 100%;
color: #fff;
position:relative;
}
.envy-contentg{
position: absolute;
left:12px;
width: 300px;
height: 60px;
top: 10px;
color: #fff;
}
.envy-maing{
font-size: 20px;
color: #fff;
near;
-moz-transition: all 300ms line
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.envy-subg{
font-size: 14px;
color: #fff;
-webkit-transition: all 300ms l
iar;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.envy-menug li:hover{
background: #DC321E;
color: #fff;
}
.envy-menug li:hover .envy-icong{
text-shadow: 0px 0px 1px ;
font-size: 50px;
color: #fff;
}
{
width: 100%;
height: 75px;
over
.envy-menug li:hover .envy-maing{
font-size: 14px;
color: #fff;
}
.envy-menug li:hover .envy-subg{
color: #fff;
font-size: 30px;
}
/*****************rss*****************/
.envy-menur{
padding: 0;
width:100%;
color: #fff;
margin: 1px auto;
}
.envy-menur l
iflow: hidden;
display: block;
background: #FFA500 ;
color: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-bottom: 4px;
-webkit-transition: all 300ms ease-in-out;
on:none;
display: block;
width: 100%;
h
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.envy-menur li:last-child{
margin-bottom: 2px;
color: #fff;
}
.envy-menur li a{
text-align: left;
text-decorat
ieight: 100%;
color: #fff;
position:relative;
}
.envy-contentr{
position: absolute;
left: 12px;
width: 300px;
height: 60px;
top: 10px;
color: #fff;
}
.envy-mainr{
font-size: 20px;
color: #fff;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
r{
background: #FF8C00 ;
color: #
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.envy-subr{
font-size: 14px;
color: #fff;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.envy-menur li:hov
efff;
}
.envy-menur li:hover .envy-iconr{
text-shadow: 0px 0px 1px ;
font-size: 50px;
color: #fff;
}
.envy-menur li:hover .envy-mainr{
font-size: 14px;
color: #fff;
}
.envy-menur li:hover .envy-subr{
color: #fff;
font-size: 30px;
}
</style>
<br />
<ul class="envy-menuf">
<li>
<a href="https://facebook.com/envyblogging">
>
</div>
</a>
</li>
</ul>
<
<div class="envy-contentf">
<h2 class="envy-mainf">
Facebook</h2>
<h3 class="envy-subf">
Like Us on Facebook</h3>
</div>
</a>
</li>
</ul>
<ul class="envy-menut">
<li>
<a href="https://twitter.com/envyblogging"><div class="envy-contentt">
<h2 class="envy-maint">
Twitter</h2>
<h3 class="envy-subt">
Follow Us on Twitter</h
3ul class="envy-menug">
<li>
<a href="https://plus.google.com/u/0/116155905562588571799"><div class="envy-contentg">
<h2 class="envy-maing">
Google+</h2>
<h3 class="envy-subg">
Add Us on Google+</h3>
</div>
</a>
</li>
</ul>
<ul class="envy-menur">
<li>
bs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<a href="https://feedburner.google.com/fb/a/mailverify?uri=envyblogging"><div class="envy-contentr">
<h2 class="envy-mainr">
RSS</h2>
<h3 class="envy-subr">
Subscribe Us on RSS</h3>
</div>
</a>
</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/l

i