Exclusive 3D Follow Me Buttons With Count For Blogger

Every Blogger knows the importance of Social Media on any blog.More the followers or fan following your blog has more you get the traffic. So to increase your blog's followers or fans we have made a very sexy and awesome looking 3D buttons with social fan count.This buttons are made by Sharrre.com.This buttons are made of pure CSS.This buttons will surely increase your blog's fan following. So add this buttons to your blog.

Demo:

Click here

Steps To Add This 3D Follow Buttons:

Log in to your Blogger Account.
Go to Layout.
Click on Add a Gadget >> HTML/Javascript.
Paste the below code there.

<style type="text/css">
.container {
margin: 0px auto;
width: 300px;
text-align: center;
}

.btn-sbm {
display: inline-block;
vertical-align: top;
position: relative;
margin: 0 5px;
padding-top: 40px;
width: 75px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 8px;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.btn-sbm:active {
margin-top: 3px;
}

.btn-sbm:active .btn-sbm-action {
padding-bottom: 3px;
-webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
}

.btn-sbm:active .btn-sbm-action:after {
bottom: 3px;
}

.btn-sbm-count {
position: absolute;
top: 0;
left: 0;
right: 0;
line-height: 40px;
font-size: 19px;
letter-spacing: -1px;
color: #555;
text-shadow: 0 1px white;
background: #e6eff5;
border-width: 1px 1px 0;
border-style: solid;
border-color: #c5c5c5 #bbb;
border-radius: 8px 8px 0 0;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
}

.btn-sbm-count:before, .btn-sbm-count:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-top-color: #e6eff5;
}

.btn-sbm-count:before {
margin-left: -7px;
margin-top: 1px;
border-width: 7px;
border-top-color: rgba(0, 0, 0, 0.07);
}

.btn-sbm-action {
display: block;
position: relative;
line-height: 32px;
padding: 2px 0 6px;
font-size: 14px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
border: solid rgba(0, 0, 0, 0.18);
border-width: 0 1px;
border-radius: 0 0 8px 8px;
}

.btn-sbm-action:after {
content: '';
position: absolute;
top: 0;
bottom: 6px;
left: 0;
right: 0;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
}

.btn-sbm-tweet {
background: #83cfe8;
background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
}

.btn-sbm-tweet:after {
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}

.btn-sbm-tweet + .btn-sbm-count {
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
}

.btn-sbm-like {
background: #6480bd;
background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
background-image: -o-linear-gradient(top, #6480bd, #3c5894);
background-image: linear-gradient(to bottom, #6480bd, #3c5894);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
}

.btn-sbm-plus {
background: #626262;
background-image: -webkit-linear-gradient(top, #626262, #404040);
background-image: -moz-linear-gradient(top, #626262, #404040);
background-image: -o-linear-gradient(top, #626262, #404040);
background-image: linear-gradient(to bottom, #626262, #404040);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
}

</style>

<div class="container">

<a href="https://twitter.com/AdityaThakker13" rel="nofollow" target="_blank"rel="author" title="Find us on twitter" class="btn-sbm">
<span class="btn-sbm-action btn-sbm-tweet">Twitter</span>
<span class="btn-sbm-count">150+</span>
</a>

<a href="http://www.facebook.com/pages/Smart-Blogging-Methods/281181345301734?bookmark_t=page" rel="nofollow" target="_blank" title="Find us on facebook" class="btn-sbm">
<span class="btn-sbm-action btn-sbm-like">Facebook</span>
<span class="btn-sbm-count">650+</span>
</a>

<a href="https://plus.google.com/u/0/108593142711028240140" class="btn-sbm" target="_blank" rel="author" title="Find us on Google+">
<span class="btn-sbm-action btn-sbm-plus">Google+</span>
<span class="btn-sbm-count">140+</span>
</a><br/>
</div><a style="float:right;" href="http://smartbloggingmethods.blogspot.in/2013/02/exclusive-3d-follow-me-buttons-with.html">Get This</a>

Change the coloured text as per your requirement.
Now, click on Save.

It's done.You can enjoy very good looking and awesome 3d Follow me buttons on your blog.

Exclusive 3D Follow Me Buttons With Count For Blogger

Demo:

Steps To Add This 3D Follow Buttons:

0 comments:

Post a Comment

Popular Posts

Arsip Blog