Floatting Twitter Fan Box for Blogger

Adding 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

Customization

• 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