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.

Post a 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
  2. I have tried it on my blog Latest Short Urdu Poetry . Its working fine. Thanks for sharing.

    ReplyDelete
  3. not working... see her e== http://hackingalltou.blogspot.in/

    ReplyDelete
  4. not working... see her e== http://hackingalltou.blogspot.in/

    ReplyDelete
  5. This comment has been removed by the author.

    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

 
Top