Add A Floating Twitter Follower Box With Follow Button - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Tuesday, 10 January 2012

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"http://3.bp.blogspot.com/-l28RXEYW-Js/TwvzWYaOwMI/AAAAAAAAAXI/VbZtLNC27ko/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.

1 comment:

  1. I have a similar tab for Facebook on my blog and it works just fine. But this one above just isn't working!

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM