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.
How to Do This?
- Login To Blogger Account.
- Click Blog Title → Template → Edit HTML.
- Click Proceed Button.
- Search Following Code [press ctrl+f]
</body>
- Replace The Above Code 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("TechTrickHome");</script>
<a href='http://www.techtrickhome.blogspot.com'>Get Twitter Fan Box Widget</a>
</div>
</div>
</body> - Replace TechTrickHome With Your Twitter Username.
- Click Save Template Button And You Are Done.
Hope you like it.
Post a Comment