27 February 2013

Floatting Twitter Fan Box for Blogger


twitter fan boxAdding social widget on your blog always a good one for any blog.This help you to keep contact with your reader socially.As we all know social network take a very important part on the field of blogging.This widgets also helps to make your blogs look attractive.Design always matters for any blog as visitors always love to stay on eye-catching blogs.So here we're going to share something related to all these stuffs.In this tutorial, You will learn how to add floating Twitter Fan Box in Blogger. This Twitter Fan Box is kinda similar to the Facebook Floating Like Box widget available for blog. This widget will surely help you to connect with your reader socially.This Twitter Fan Box Show recent 10 followers by default.This Fan Box Is made by Mark Carey.

 Must Read : Remove Blogger Page title

Add Floating Fan Box on Blogger

  • Login onto your Blogger Account.
  • Next navigate to Blogger Dashboard → Template → Edit HTML.
  • Search(press ctrl+f) for the </body> code tag

Next replace the above code with the below provided code.

<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("TechTrickHome");</script> <a href='http://www.techtrickhome.blogspot.com'>Get Twitter Fan Box Widget</a> </div> </div> </body>

  • Now save the template


  • Replace TechTrickHome with your twitter user name
  • Next click on the save template button and you're all done.
 Must Read : Moving Featured Post Slider Blogger

Hope you're gonna like this post.For more such update be with us.Comments are highly appreciated.Thank you.

Articles You May Like

6 comments: Leave Your Comments

  1. Thanks for this tip. I have a floating widget on my blog, too. :)

  2. another useful trick!! thank you..i am slowly revamping my blogspot and doign it step by step from your tips =)

  3. twitter floating box can really a space saver.

  4. It's really cool , i will try it for my Blog

  5. This is nice! :D I'm really considering moving to Wordpress.org soon. I want to customize my blog because you've shown us sooo many options :)