How To Add Floating Twitter Fan Box Widget

Posted by Zain Raza On 2 comments

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 BoxThis 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!




2 comments:

Susan Neal said...

Thanks for sharing! I was trying to add to my blog however, once I click on "create HTML".....that's as far as I get. I do not see a Proceed Button. Help?

website design said...

Great post! I am happy studying your article. However should statement on few basic things, The website style is perfect, the articles is really nice.
website design

Post a Comment