How to Add Social Subscribe With CSS3 Bubble Buttons

Social networks is a easy way to get more traffic for your blog or website. Does we get profit by using social networking widget?Yes, Of course this is very helpful for your blog or website. Today, this awesome tutorial  will tell you "How to Add Social Subscribe With CSS3 Bubble Buttons To Blogger Blog".Always try to add beautiful widgets to your blog.

Because if your blog's look is attractive then you will get more subscribers and followers.

Live Demo

How To Add Social Subscribe Widget With CSS3 Buttons To Blogger Blog

• Go to Blogger Dashboard -> Layout -> Add a Gadget
• Choose HTML/JAVASCRIPT Gadget and Paste The Following Code Inside It

<style>
/*BD-Social Subscribe Widget By Blogsdaddy.Com*/
.button {
font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
text-decoration: none !important; white-space: nowrap;
display: inline-block; vertical-align: baseline; position: relative;
cursor: pointer; padding: 10px 20px; background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
background-position: bottom left; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4_L9nu20oNTmORFB_pPH7Zao-B85DQ88_XLOwpzjns10XYVHUH75evxNXqr4qhfqcfHUqX347lNeub1l8qFyiPJqTQrlbMnSGhKLftrMMta_mQiSuwQXG7TyvRYSITikhofONpwBfh4/s1600/
bloggertricksdotbiz+bg.png'); /* Multiple backgrounds version. The background images
are defined individually in color classes */
background-position: bottom left, top right, 0 0, 0 0;
background-clip: border-box; /* Applying a default border raidus of 8px */
-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;
/* A 1px highlight inside of the button */ -moz-box-shadow: 0 0 1px #fff inset;
-webkit-box-shadow: 0 0 1px #fff inset; box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 *//* Currently works only in
Safari/Chrome */ -webkit-transition: background-position 1s;
-moz-transition: background-position 1s; transition: background-position 1s;
}
.button:hover {/* The first rule is a fallback, in case the browser
does not support multiple backgrounds*/
background-position: top left;background-position: top left, bottom right, 0 0, 0 0;
}
.button:active {/* Moving the button 1px to the bottom when clicked */
bottom: -1px;}
.button.small { font-size: 13px;}
.gray.button { color: #525252 !important; border: 1px solid #a5a5a5 !important;
background-color: #a9adb1; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4_L9nu20oNTmORFB_pPH7Zao-B85DQ88_XLOwpzjns10XYVHUH75evxNXqr4qhfqcfHUqX347lNeub1l8qFyiPJqTQrlbMnSGhKLftrMMta_mQiSuwQXG7TyvRYSITikhofONpwBfh4/s1600/
bloggertricksdotbiz+bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4_L9nu20oNTmORFB_pPH7Zao-B85DQ88_XLOwpzjns10XYVHUH75evxNXqr4qhfqcfHUqX347lNeub1l8qFyiPJqTQrlbMnSGhKLftrMMta_mQiSuwQXG7TyvRYSITikhofONpwBfh4/s1600/
bloggertricksdotbiz+bg.png'), -moz-radial-gradient(center bottom, circle,
rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient
(#c5c7ca, #92989c); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4_L9nu20oNTmORFB_pPH7Zao-B85DQ88_XLOwpzjns10XYVHUH75evxNXqr4qhfqcfHUqX347lNeub1l8qFyiPJqTQrlbMnSGhKLftrMMta_mQiSuwQXG7TyvRYSITikhofONpwBfh4/s1600/
bloggertricksdotbiz+bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4_L9nu20oNTmORFB_pPH7Zao-B85DQ88_XLOwpzjns10XYVHUH75evxNXqr4qhfqcfHUqX347lNeub1l8qFyiPJqTQrlbMnSGhKLftrMMta_mQiSuwQXG7TyvRYSITikhofONpwBfh4/s1600/
bloggertricksdotbiz+bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%,
0% 100%, from(#c5c7ca), to(#92989c));float:right;margin-top:-5px;margin-right:-15px;
}
.gray.button:hover { background-color: #b6bbc0; background-image: url('http://4.bp.
blogspot.com/-FvZU_8tLgFc/T9DDIjhSn9I/AAAAAAAAA1Y/TGXuHSyRQYk/s1600/
bloggertricksdotbiz+bg.png'), url('http://4.bp.blogspot.com/-FvZU_8tLgFc/T9DDIjhSn9I/
AAAAAAAAA1Y/TGXuHSyRQYk/s1600/bloggertricksdotbiz+bg.png'), -moz-radial-
gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz
-linear-gradient(#d1d3d6, #9fa5a9); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4_L9nu20oNTmORFB_pPH7Zao-B85DQ88_XLOwpzjns10XYVHUH75evxNXqr4qhfqcfHUqX347lNeub1l8qFyiPJqTQrlbMnSGhKLftrMMta_mQiSuwQXG7TyvRYSITikhofONpwBfh4/s1600/
bloggertricksdotbiz+bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4_L9nu20oNTmORFB_pPH7Zao-B85DQ88_XLOwpzjns10XYVHUH75evxNXqr4qhfqcfHUqX347lNeub1l8qFyiPJqTQrlbMnSGhKLftrMMta_mQiSuwQXG7TyvRYSITikhofONpwBfh4/s1600/
bloggertricksdotbiz+bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%,
0% 100%, from(#d1d3d6), to(#9fa5a9));}
.body{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdY74LUM8QpK6mjq86e6YeqrA-fr5A7FV_BQb49LeA6gzHUB7uT-kxKK7sh4Q34rFVsG7hfNLoqUnVxNqtZkF5Iv0a4BMwEKnob7JS5ZkQMyXR3vpWNYJI3mKtI8MbeWQiNxJ6lvlUlzI/s1600/bg.png) no-repeat;
width:300;height:360;padding:22px;
}
.rss-bt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtR6kvN2gynfQvR6ZQ-UlztQFqWRe-R_qlAbFpf6YsRrx0wzEf1r7GipYqI7MjAteQCtfJHmnnAXCEWLwlhncK2l3TKLTnU3w4iYhuNpG7_iMDKmaInzYCvFOqNZY3sKpb22GTZvUPnuE/s1600/RSS.png) no-repeat;
height: 68px;
padding-left:65px;
margin-top: 5px;
margin-left:-15px;
}
.twitter-bt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJFrVtizRl5SPxPbEvt9KttIpDNyHbsMY8DjzZTSAel7qFULJ5YXOAPQU96Fq6sW7ncN9rlNL30KHfT2ASQo6zImHhdqEAP_EV0jG70dZQZjdBML2WM6bwPbBbEGrM6Zk8NtPAQVlso0/s1600/%20TWITTER.png) no-repeat; height: 68px;
padding-left:65px;
margin-top: 15px;
margin-left:-15px;
}
.facebook-bt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjizciZKaK25zNa9GSLF0SLRkOH4MVHY8SQEAe9CsTiBOORREq1jclsmerUnNyiGRii978DoIcCTF1PQy-JnxovzIS7KTonbpX6ctREkzPzQc0XUoFTkfC0AlQZlaD9k5_oUAhb7yY2Ijg/s1600/FACEBOOK.png) no-repeat;
height: 68px;
padding-left:65px;
margin-top: 25px;
margin-left:-15px;
}
.gplus-bt{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM92hhbSbGZ4Is2Ex4FapdKrnwLpTfrWtDhdHHmNUWf7eNc4jD9HSF_u8-jYaIEiJQYULThHFHpYwoCyYK96c-kHlKkrzXwquum1MAqcClkcJNJxCIC4Oe7QMXaoWxl44ueFF9qnYGt1o/s1600/gpluss.png) no-repeat;
height: 68px;
padding-left:65px;
margin-top: 15px;
margin-left:-15px;
}
.follower-rss, .follower-twitter, .follower-facebook, .follower-gplus {
font-family: Georgia, sans-serif, Times;
font-size: 1.1em;
font-style:italic;
color:#289728;
padding-top:10px;
}
.follower-rss span {
font-size: 1.9em;
font-weight: bold;
font-style:italic;
color:#FFB93C;
}
.follower-twitter span {
font-size: 1.9em;
font-weight: bold;
font-style:italic;
color:#6DB6E6;
}
.follower-facebook span {
font-size: 1.9em;
font-weight: bold;
font-style:italic;
color:#3889BA;
}
.follower-gplus span {
font-size: 1.9em;
font-weight: bold;
font-style:italic;
color:#3889BA;
}
</style>
<div class="body">
<div class="rss-bt">
<div class="follower-rss"> <span>200</span>readers
<a href="http://feeds.feedburner.com/BlogsDaddy" class="button small gray">
Subscribe</a></div> </div>
<div class="twitter-bt"><div class="follower-twitter"><span>1384</span>followers
<a href="http://twitter.com/BlogsDaddy" class="button small gray">Follow</a></div>
</div>
<div class="facebook-bt">
<div class="follower-facebook"><span>3364</span>fans
<a href="http://facebook.com/BlogsDaddy" class="button small gray">Like Us</a> </div>
</div>
<div class="gplus-bt">
<div class="follower-gplus"><span>170</span>followers <a href="https://plus.google.com/106217413057730068740" class="button small gray">
Add Me</a></div>
</div><span style=" float:right; padding:5px; margin-right:-10px;"><a href="http://www.bloggertricks.biz/2012/06/bt-style-social-subscribe-with-css3.html">|Grab This|</a></span></div>

• Save The Gadget and View Your Blog

Customization Of This Widget

• Replace http://feeds.feedburner.com/BlogsDaddy with your Feedburner Url.
• Replace http://twitter.com/BlogsDaddy with your Twitter Url.
• Replace http://facebook.com/BlogsDaddy with your Facebook Url.
• Replace https://plus.google.com/106217413057730068740 with your Google Plus Profile Url

Counters

Change 200, 1384, 3364, 170 to Manually Describe Subscribers, Followers, Likes and Added To Circles Respectively.