How To Add Floating Twitter Recent Tweets Widget

In the last Tutorial, i tried to show you that how to add Twitter Floating Fan Box Widget which basically was Twitter Fan Box. You can see that Tutorial here. In this Tutorial, i show you HOW TO ADD FLOATING TWITTER RECENT TWEETS Widget in Wordpress & Blogger. This Twitter Fan Box Is Similar To Facebook Like Box. This is Floating Twitter Recent Tweets Widget For WordPress & Blogger. When you move cursor on it, It pop out with Recent Tweets.

Adding Recent Tweets To Wordpess:
1. Go to Dashboard > Appearance > Widgets > Available Widgets.
2. Drag Text widget into a sidebar.
3. Paste in the code.
4. Save.

Adding Recent Tweets To Blogger:

1. Go to Dashboard > Design > Page Elements.
2. Click Add A Gadget. In window, select HTML/Javascript .
3. Copy the code below and paste it inside the box.
4. Click Save button.

<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}

#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}

#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}

#kakinetwork_left{z-index:10003;border:2px solid #303030;background-

color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}

</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>

<div id="on"><div id="twitter_right" style="top: 20%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUYL7PYI0lkRFjJXoA_5pZ9y8D52ACy7IRfkjN1leAbBTZ4irgd9VtYDIl3rYULXc3de6kFY-oPLdY6YXhf09kp4TiOlUnICqjDmAyWRiiD8Jdqz50GEWwuI3v2C_ZoGvAKCNXtx8Zubw/s320/allbloggingtips.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 260,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('crackmodo').start();</script></div></div></div>

</div>

Replace the crackmodo with your twitter username.

You are done! That's it.

Related Articles:

jQuery Slideshow For Blogger

Popup/Slideout Facebook Likebox 

How to Create Drop Down Menu  

Multi Column Footer Widget 

Make A Website Blog In Two Steps 

How To Increase Website Blog Traffic (Free SEO)