Wednesday 6 February 2013

How To Add Floating Twitter Fan Box In Blogger


In This Tutorial, You Will Learn How To Add Floating Twitter Fan Box In Blogger. This Twitter Fan Box Is Similar To Facebook Like Box And Google Friend Connect. This Will Helps You To Connect With Your Readers Easily.

This Twitter Fan Box Show Recent 10 Followers By Default And Your Readers Can Follow You Without Leaving Your Blog. This Fan Box Is Created By Mark Carey.

    1.  Login To Blogger Account
    2.  Click Blog Title→Templete→Edit HTML
    3.  Click Proceed Button
    4.  Search </body> By Using Ctrl + F
    5.  Replace The Code Above With The Code 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("gauravdma2");</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 Gauravdma2 With Your User Name
    7.  Click SaveButton And You Are Done









0 comments:

Post a Comment

 
Flying Twitter Bird Widget By CoolBlogTricks.com