How To Add Floating Twitter Fan Box Widget

In the last Tutorial, i tried to show you that how to add Twitter Floating Follow us Widget which basically was follow us box with image of Twitter bird on tree. You can see that Tutorial here. In this Tutorial, i am going to show you HOW TO ADD FLOATING TWITTER FAN BOX in Blogger. This Twitter Fan Box Is Similar To Facebook Like Box. This Floating Twitter Fan Box show recent 10 followers by default and your readers can follow you without leaving your Blog and that's why this widget is increasingly become popular. There are some steps and you have to follow these steps given below one by one. So lets start.

1. Log in to your Blogger Account.

2. Click Blog title > Template < Edit HTML.

3. Click Proceed Button.

4. Search following code using CTRL + F.

</body>

5. Replace the above code (</body>) with the code given below.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>

<script type="text/javascript">

jQuery(document).ready(function() {jQuery(".tehtbox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-235"}, "medium");}, 400);});

</script>

<style>

.tehtbox{background:url(http://lh5.googleusercontent.com/-q9_zbB_3388/UCOvETdEQpI/AAAAAAAAA4o/F0CfR3hxuk0/s100/Twitter.png) no-repeat scroll left center transparent!important;float:right;height:250px;width:230px;z-index:99999;position:fixed;right:-235px;top:20%;padding:0 5px 0 40px}

.tehtbox div{margin-right:-8px;border:3px solid #00bef6;background:#fafafa;padding:0}

.tehtbox a{font-size:10px;margin-left:40px}

</style>

<div class="tehtbox">

<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script>

<div id="twitterfanbox">

<script type="text/javascript">fanbox_init("crackmodo");</script>

<a href='http://www.techehow.com/2012/08/add-twitter-fan-box-to-blogger.html'>Get Twitter Fan Box Widget</a>

</div> 

</div>

</body>

6. Replace crackmodo With Your Twitter Username and click Save Template Button.

That's it, you are done!

Related Articles:

jQuery Slideshow For Blogger

Popup/Slideout Facebook Likebox 

How to Create Drop Down Menu  

Multi Column Footer Widget 

Make A Website Blog In Two Steps 

How To Increase Website Blog Traffic (Free SEO)