Beautiful social subscription widget for blogger

Cool Metro style responsive social subscription widget has been published. Now, I am going to share with you a beautiful CSS3 social subscription widget that you can use in your blog sidebar and after finishing of blog post. Really cool and flexible to increase your subscription. This widget/plugin has most popular social media website including Facebook, twitter, Google plus, Youtube and a beautiful email subscription form. This widget has transparent background and more professional social media buttons that will induce your blog visitors to subscribe your blog. It includes CSS3 and HTML that you are well aware of doesn’t worry if you have little or no knowdlge of these languages. You should only have to replace your links with #. So get started and grab this……Dude!

Live Preview

How to add it In Blogger:

Login to ypur blogger dashboard and select a template in which you want to add this plugin
Layout >> Add a gadget
Select HTML/JavaScript and paste the below code in it.

<style>
.SocialButtonsBorder {
margin:0 auto;
padding:2px;
width:auto;
border-radius:5px;

}
#BB-SexySocialButtons{
list-style:none; 
text-decoration:none; 
font-size:0.9em; 
font-family:trebuchet ms,sans-serif;
}
#BB-SexySocialButtons a{
text-decoration:none; 
font-family:trebuchet ms,sans-serif;
}
#BB-SexySocialButtons li{
position:relative; 
height:38px; 
cursor:pointer; 
padding: 0 !important;
}
#BB-SexySocialButtons .facebook, .googleplus, .YouTube, .rss, .twitter{
position:relative; 
z-index:5; 
display:block; 
float:none; 
margin:5px 0 0; 
width:210px; 
height:38px; 
border-radius:5px; background:url(http://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4/56i9phAS2do/s1600/BB+Sprites+Social+Icons.png) no-repeat;  
background-color:rgba(217,30,118,.42); 
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; 
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  
box-shadow:rgba(0,0,0,.28) 0 2px 3px; 
color:#141414; 
text-align:left; 
text-indent:50px; 
text-shadow:#333 0 1px 0; 
white-space:nowrap;  
line-height:32px; 
-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
-o-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
transition:width .25s ease-in-out,background-color .25s ease-in-out; 
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#BB-SexySocialButtons li:after{
position:absolute; 
top:0; 
left:50px; 
z-index:2; 
display:block; 
height:38px; color:#ffffff; 
content:attr(data-alt);  
line-height:32px;
}
#BB-SexySocialButtons .icon{
overflow:hidden; 
color:#fafafa;
}
#BB-SexySocialButtons .facebook{
width:32px; 
height:32px; 
background-color:rgba(59,89,152,0.42); 
background-position:0 0;
}
#BB-SexySocialButtons .twitter{
width:32px; 
height:32px; 
background-color:rgba(64,153,255,0.42); 
background-position:0 -33px;
}
#BB-SexySocialButtons .googleplus{
width:32px; 
height:32px; 
background-color:rgba(228,69,36,0.42); 
background-position:-3px -66px;
}
#BB-SexySocialButtons .YouTube{
width:32px; 
height:32px; 
background-color:rgba(174,45,39,0.42); 
background-position:-2px -95px;
}
#BB-SexySocialButtons .rss{ 
width:32px;  
height:32px;  
background-color:rgba(255,102,0,0.42); 
background-position:-3px -126px;
}
#BB-SexySocialButtons li:hover .icon, 
.touch #BB-SexySocialButtons li .icon{
width:210px;
}
.touch #BB-SexySocialButtons li .facebook, #BB-SexySocialButtons li:hover .facebook{
background-color:rgba(59,89,152,1);
}
.touch #BB-SexySocialButtons li .twitter, #BB-SexySocialButtons li:hover .twitter{
background-color:rgba(64,153,255,1);
}
.touch #BB-SexySocialButtons li .googleplus, #BB-SexySocialButtons li:hover .googleplus{
background-color:rgba(228,69,36,1);
}
.touch #BB-SexySocialButtons li .YouTube, #BB-SexySocialButtons li:hover .YouTube{
background-color:rgba(174,45,39,1);
}
.touch #BB-SexySocialButtons li .rss, #BB-SexySocialButtons li:hover .rss{
background-color:rgba(255,102,0,1);
}
</style>
<div class="SocialButtonsBorder">  <ul id="BB-SexySocialButtons">    <li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/#">Follow us on Facebook</a></li>    <li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/#">Follow us on Twitter</a></li>    <li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/#">Follow us on Google+</a></li>    <li data-alt="Subscribe us on YouTube"><a class="icon YouTube" href="http://www.youtube.com//user/#">Subscribe us on YouTube</a></li>    <li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/#">Subscribe with RSS</a></li></ul></div>

Replace # with your own links..

Enjoy!