Awesome twitter follow button with jquery

Why we use social networks?

We use social networks because many people don’t want to search about what they want.
So we can give him direct information using social networks.
Like if we posted a post to our blog and tweeted , stumbled about it and also put in facebook page.
So the information has been reached to them .
So our traffic also increases.
We’ll get feed backs.
So there are many advantages of using social networks for our blog.
If you haven’t  done any network , do write now.
Because it’ll help you more to reach many people.

You can see in the picture that it’s looking simple not any new or creative in this pic.
But we are going to learn for twitter follow button so if you want live preview , we’ve made it: http://cdpn.io/wrnIj
 # Go to your blog dashboard.
# Click on template tab and backup your template.
# After click on Edit HTML.
# Search <b:skin> and expand it.
# Then search for </b:skin> and above it paste below code.

.cbtt
{
  width:230px;
}
.txtt div
{
  display: inline-block;
}
.cbttt
{
  transition:600ms;
  -webkit-transition:600ms;
  -moz-transition:600ms;
  -ms-transition:600ms;
  -o-transition:600ms;
  cursor: pointer;
  width: 230px;
  border: 1px solid #e2e2e2;
  text-align: center;
  border: 1px solid;
  background: grey;
}
.cbttt1
{
  box-shadow:0 -10px 5px #000;
  -webkit-box-shadow:0 -10px 5px #000;
  -moz-box-shadow:0 -10px 5px #000;
  -ms-box-shadow:0 -10px 5px #000;
  -o-box-shadow:0 -10px 5px #000;
  margin-top: 30px;
  transform: rotateX(120deg) scale(.95);
  -webkit-transform: rotateX(120deg) scale(.95);
  -moz-transform: rotateX(120deg) scale(.95);
  -ms-transform: rotateX(120deg) scale(.95);
  -o-transform: rotateX(120deg) scale(.95);
}
.txtt a ,.a1
{
  text-decoration: none;
  color: #000;
  font: normal 15px ‘Verdana’;
}
.txtt
{
  background: white;
  border: 2px solid #aaa;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  display: none;
  padding: 1px;
  position: absolute;
  top: 21px;
  left: 5px;
}
.imgg
{
  position:relative;
  top:4px;
  width: 20px;
  height: 20px;
}

# Search for </head> and paste below code above it.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’ type=’text/javascript’/>
    <script type=’text/javascript’>
      $(function(){$(&quot;.cbtt&quot;).click(function(){$(&quot;.cbttt&quot;).toggleClass(&quot;cbttt1&quot;);$(&quot;.txtt&quot;).slideToggle(350);});});
    </script>

# If you’ve installed jquery, then don’t paste the code which is displayed with blue color text.
# Save template and click on Layout tab.
# Click on Add a Gadget.
# Then click select HTML/Javascript.
# Give Title as your choice.
 # On content box paste below code.

<div class=”cbtt”><img src=”http://1.bp.blogspot.com/-BWy8iqseGiQ/UYDzfdEeqiI/AAAAAAAAAq4/6SO2sjXH4GQ/s1600/twitter-logo1.png” alt=”” class=”cbttt” /></div>
<div class=”txtt”><img src=”http://3.bp.blogspot.com/-B-iDWmUXRQo/UYDzsHh9k3I/AAAAAAAAArA/Iy-zCZVtgCM/s1600/twtlg.jpg” alt=”” class=”imgg” /><div class=”a1″>Follow me </div><a href=”https://twitter.com/kmandalwala” target=”_blank”> @kmandalwala </a></div>

# Change the link with your link which is highlighted with yellow color and also change text which is highlighted with skyblue color as your choice.
# Now you’ve done. Enjoy.
# Just change the place of your gadget as your choice.

Problem while doing this?

Just comment or contact us.

Share This Now:

Add a Comment

Your email address will not be published. Required fields are marked *