BT-Style Social Subscribe with CSS3 Bubble buttons

By Ayman H Monday, June 11, 2012
Social networks have became one of the most needed resource for bloggers to promote their blog in such a way that, day by day lot of new social widgets and gadgets are being created in blogosphere. I have seen a huge number of blogger widgets all over the blogosphere and noticed that social sharing and subscribing widgets are the most created one. Does these widgets really playing a powerful part in blog promotion??!, may be or may not be, because still now we can notice many bloggers who are not at all worried about social networks association with their blog.

http://2.bp.blogspot.com/-XngBUqxUeSw/T9DTT4_0bLI/AAAAAAAAA1k/0yvHGvMxkw0/s1600/btunique+social+subscribe.jpg

The only reason they have left away from the utilization of social networks is,they are still starters and hence a very low social stats of their blog can affect on their readers to get a bad impression on the blog as huge number of visitors are well concerned about the social stats of blogs and websites today and it is the main factor the visitors are considering while rating a blog.
This leads to the maximum bounce rate of blog due to the immediate exit of unique visitors who are visiting your blog for first time. Does my prediction is true??.

Dont worry. To get rid of this tricky game, i have created a new social subscribing widget for my blogger friends who are very new to adopt social plugins on their blog. The main thing to be noticed in this widget is, you can manually describe the number of followers, likers, etc by yourself and it is not the original count. Thus throwing the feel of newbie far away. But one fine day it is necessary for you to show the original social stats of your blog, thus to ensure maximum possible followers, likers, etc for your blog, i have implemented a very beautiful CSS3 bubble buttons in this widget which really catches the attraction of visitors towards it and thus ensures a rapid raise in your blog fans if your blog content is really worth along with this beautiful widget.

Does this became a very long talk??:), well its my hobby to specify the exact  pupose of an element before recommending it to others. Ok let us move with the tutorial now.

BT Style Social Subscribe widget with CSS3 Buttons

1. Go to blogger dashboard > Layout > Add a gadget.
2. Choose HTML/JAVASCRIPT gadget and paste the following peace of code inside it.

<style>
/*BT-Style Social Subscribe Widget By Bloggertricks.biz*/
.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(http://4.bp.blogspot.com/-FvZU_8tLgFc/T9DDIjhSn9I/AAAAAAAAA1Y/TGXuHSyRQYk/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(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(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient
(#c5c7ca, #92989c);    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), -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(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), -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(http://2.bp.blogspot.com/-XzosgGcgKqE/T8EFgeTWfaI/AAAAAAAAAwM/7_T2_q1_otg/s1600/bg.png) no-repeat;
width:300;height:360;padding:22px;
}
.rss-bt {
    background: url(http://2.bp.blogspot.com/-xAXd4oWpb10/T8EKW-t6O5I/AAAAAAAAAwo/NJiMcpIxWJ4/s1600/RSS.png) no-repeat;
    height: 68px;
    padding-left:65px;
    margin-top: 5px;
margin-left:-15px;
}
.twitter-bt {
    background: url(http://1.bp.blogspot.com/-EFJqz8i6sgk/T8EkMn3CrDI/AAAAAAAAAw8/CDqeAVNZg6o/s1600/
TWITTER.png) no-repeat; height: 68px;
 padding-left:65px;
    margin-top: 15px;
margin-left:-15px;
}
.facebook-bt {
    background: url(http://4.bp.blogspot.com/-nvI9B_2aOmg/T8EkFHxwNMI/AAAAAAAAAw0/PFY6CDYQ9ns/s1600/
FACEBOOK.png) no-repeat;
height: 68px;
    padding-left:65px;
    margin-top: 25px;
margin-left:-15px;
}
.gplus-bt{
    background: url(http://2.bp.blogspot.com/-GjvZzVI8-FA/T8EtFoANsaI/AAAAAAAAAxY/HdxCuCcpxtM/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>515</span>readers
<a href=http://feeds.feedburner.com/bloggertricks/btvj class=button small gray>
Subscribe</a></div> </div>
<div class=twitter-bt><div class=follower-twitter><span>1058</span>followers
 <a href=http://twitter.com/jackievijay143 class=button small gray>Follow</a></div>                          
</div>                  
<div class=facebook-bt>                    
<div class=follower-facebook><span>260</span>fans
<a href=http://facebook.com/bloggertricksdotbiz class=button small gray>Like Us</a>                           </div>              
</div>
<div class=gplus-bt>                    
<div class=follower-gplus><span>360</span>followers <a href=https://plus.google.com/110100302012846213219 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>
3. Save The Gadget and view your blog.

DEMO


Customization


  • Replace http://feeds.feedburner.com/bloggertricks/btvj with your Feedburner Url.
  • Replace http://twitter.com/jackievijay143 with your Twitter Url.
  • Replace http://facebook.com/bloggertricksdotbiz with your Facebook Url.
  • Replace https://plus.google.com/110100302012846213219 with your Google Plus Profile Url.


Counters


  • Change 515 ,1058 ,260 ,360 to manually describe Subscribers, Followers, Likes and Added To Circles Respectively.

Post Tags:

Blogger Tricks

Basic / Advanced tutorials on WordPress, Google Blogger, SEO, Earning online income, Website development tips, tricks, etc.

No Comment to " BT-Style Social Subscribe with CSS3 Bubble buttons "