How To Add Floating Twitter Fan Box Widget

Posted by Unknown 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 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!




Labels: , , , ,

2 comments:

Unknown 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?

November 3, 2013 at 2:42 PM
Anonymous 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

November 5, 2013 at 9:33 PM

Post a Comment