Add A Floating Twitter Follower Box With Follow Button

In last week, I gave tutorial about Floating Facebook Like Box,Now I am giving same tutorial for twitter. The box contains a follow button by which your users can directly follow you on twitter without leaving your blog. You can change the side of box as you wish.

Installing The Jquery Plugin - 

1. Go to Blogger Dashboard > Design > Edit HTML.

2. Now Search For </head> tag using CTRL+F function.

3. Now add below code just above/before that.


*If you have already added Jquery to your blog then don't add it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Adding To Blogger - 

1. Go to Blogger Dashboard > Design > Page Layout.
2. Choose Add A Gadget > HTML/JavaScript.
3. Paste below code and save it.
       
     *  Don't give any name to widget.

<script src="http://btsnts.googlecode.com/files/btsnts-twitterfanbox_init.js" type="text/javascript"></script>

<script type="text/javascript">
//<!--
$undefineddocument).readyundefinedfunctionundefined) {$undefined".btsntslikebox").hoverundefinedfunctionundefined) {$undefinedthis).stopundefined).animateundefined{right: "0"}, "medium");}, functionundefined) {$undefinedthis).stopundefined).animateundefined{right: "-250"}, "medium");}, 500);});
//--></script>
<style type="text/css">
.btsntslikebox{background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Fowe_3-L5dcOUKJNxECW7bZ6n6D6nLZeNDrkQ9Y0JpwM0aPqA9IMEPz1hM-lRnHBK8c2TnpevQkZIHce6hy19t3sDrOhyphenhyphen3vLIAtg6SkGg4gCcwbs_04t9Wb035jIiC3fwCJsWinVlHk/s1600/btsnts-twitter-floating.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.btsntslikebox div{border:none;position:relative;display:block;}
.btsntslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.btsntslikebox span a{color: #808080;text-decoration:none;}
.btsntslikebox span a:hover{text-decoration:underline;}
</style><div class="btsntslikebox" style=""><div><div id="twitterfanbox"><script type="text/javascript">fanbox_initundefined"rahulippar");</script
type="text></div id="twitterfanbox"><span><a href="http://btsnts.blogspot.com/">+ Get This!</a></span></div></div>

If you want to expand more twitter widgets then click here.


Please comment if you found any fault in this tutorial also mention your problem if you can't add it to your blog.