Cool Floating Recent Tweets Widget for Blogs

by Ammar Ali · 27 comments

Cool Floating Recent Tweets Widget for BlogsI recently Posted a cool twitter follower widget for blogger blog. Previous one is  a simple widget for sidebar.Today I’ve Floating Recent Tweets Widget For Blogger and WordPress Blog. When you move cursor on it. It pop out with Cool Floating Recent Tweets Widget. This is a great widget for you to increase twitter followers and force visitors to follow you. ;)
 
Below I’ll show you how to add this Cool Floating Recent Tweets Widget In Blogger and WordPress.
 


Live Demo

Adding Cool Floating Floating Recent Tweets Widget.

Adding Recent Tweets Widget 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.

Adding Recent Tweets Widget To WordPress

  1. Go to Dashboard > Appearance > Widgets > Available Widgets.
  2. Drag Text widget into a sidebar.
  3. Paste in the code.
  4. Save.
<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="http://2.bp.blogspot.com/-fcEMbjMcVhI/UDzNfUCWxcI/AAAAAAAAAt4/p0lew_c7Sxw/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('allbloggingtips').start();</script></div></div></div>

</div>

Just replace allbloggingtips with your twitter username. That’s it! :D

Visit your Blogs to see it floating at the right side of your webpage. I hope this Floating Recent Tweets Widget will help you in increasing the number of your Twitter Followers. That’s all. If you face any problem in Floating Floating Recent Tweets Widget then don’t stop just drop your comments and Feel free to ask.

 
Did you enjoy this article?
Share
the
Love
Get FREE Updates
Get Freebies, updates & Special offers straight into your inbox.

Article by

I'm +Ammar Ali Part time Blogger, young Entrepreneur, Affiliate marketer and Student. Read more about me. You can connect with me on Twitter, Facebook.

Ammar has written 125 awesome articles for us.

Recommended Deals

BlueHost- Best WordPress Hosting Best Affordable Theme for WordPress Get Targeted Ranking - First Rank on Google

{ 27 comments… read them below or add one }

1 sandeep February 12, 2012 at 8:25 pm

awesome bro………

Reply

2 Deej the Blogger April 11, 2012 at 5:30 pm

This is so cool! I am gonna put it on my blog.

Check it out later! :)

Thanks for this one!

Reply

3 Haider September 9, 2012 at 11:17 am

No doubt this is one of the awesome widget for Twitter, Thanks For Sharing
Haider recently posted..Top 7 Strategies To Rank Well For Keywords In Your CityMy Profile

Reply

4 DannyelPicazo August 22, 2012 at 10:21 pm

How can i add this to wordpress???
Thank you
DannyelPicazo recently posted..~ Feria Mineral De La Reforma 2012My Profile

Reply

5 Ammar Ali September 8, 2012 at 8:54 pm

Hello There!

I’ve update this tutorial with new code and steps. Please look again! :D

Reply

6 DannyelPicazo September 10, 2012 at 7:46 pm

Cool, thank you very much!!!

I just see there is a facebook version, it works in wordpress to???

Reply

7 Ammar Ali September 10, 2012 at 8:20 pm

I’m not sure! Can I get more details please?

Reply

8 DannyelPicazo September 10, 2012 at 8:34 pm
9 Khaja moin September 8, 2012 at 9:33 pm

Thanks a lot for such helpful posts Ammar.
Khaja moin recently posted..35 Social Bookmarking Sites to Increase Your TrafficMy Profile

Reply

10 Pavan September 8, 2012 at 9:37 pm

It’s awesome bro. Very clean and neat. :Thumbs up:
Pavan recently posted..How You Can Increase Comments On Your BlogMy Profile

Reply

11 Vinod Kumar September 9, 2012 at 1:19 am

Cool work Ali.This will come handy in few of my blogs.Looking forward to some more awesome works :) Kudos!!
Vinod Kumar recently posted..All About Plastation Network CodesMy Profile

Reply

12 Osho Garg September 9, 2012 at 7:08 am

Looks Cool As Shown In Image :)
Good Work Ammar :)
Osho Garg recently posted..How To Add Black & White Facebook Like Box v3 To BloggerMy Profile

Reply

13 JZEEK September 9, 2012 at 12:25 pm

nice widget thanks buddy keep up the good work….
JZEEK recently posted..HTC J ISW13HT waterproof SmartphoneMy Profile

Reply

14 George September 9, 2012 at 2:49 pm

Amazing. Does it increase the page load time. Have you done all this coding yourself.

Reply

15 Ammar Ali September 9, 2012 at 6:11 pm

Not! It wont affect your blog loading time. YES!

Reply

16 Saif September 9, 2012 at 8:17 pm

Hey,

Thank you for this awesome twitter widget. I was looking for this.

Thank you

Saif
Saif recently posted..Categories Vs Tags – What to choose from SEO perspective ?My Profile

Reply

17 Kate Simpson September 10, 2012 at 3:15 am

Super cool widget. Will definitely try this. Thanks mate.

Reply

18 Usama Siddiqui September 10, 2012 at 10:50 am

Awesome widget brother Ammar. I will definitely put it in my blog.
Thanks for the share.Peace.
Usama Siddiqui recently posted..Get .asia Domain For FreeMy Profile

Reply

19 CHRISTIAN LITERATUS September 10, 2012 at 5:21 pm

Thanks a lot for sharing this. Keep it up Ammar. I need this on my blog.
CHRISTIAN LITERATUS recently posted..Finest Waterfall in Cebu – Mantayupan FallsMy Profile

Reply

20 jaswanth September 13, 2012 at 3:46 pm

Thanks lotzzzz Ammar, Am going to use in my blog.
jaswanth recently posted..What is Hibernate – Hibernate IntroductionMy Profile

Reply

21 Melissa October 30, 2012 at 12:45 pm

Very cool – just one question.
There is a random greyed out box that is now in the sidebar that doesn’t look like it should be there. Any idea on how to get rid of it?

Thanks!

Reply

22 Ammar Ali October 30, 2012 at 2:19 pm

you can’t remove this!

Reply

23 Anderson October 31, 2012 at 2:30 pm

Its a cool Tools for blogs recent tweets neat to see it in blogs ;)

Reply

24 krishnaTORQUE March 1, 2013 at 2:13 pm

can i use this plugin with the facebook plugin ??
krishnaTORQUE recently posted..By: krishnaTORQUEMy Profile

Reply

25 Ammar Ali March 1, 2013 at 3:20 pm

sure, you can!

Reply

26 Ammar Ali September 12, 2012 at 7:36 pm

If you are looking for that floating like box for WP. Here is tutorial http://allbloggingtips.com/2012/05/11/floating-facebook-like-box-for-wordpress/ :)

Reply

27 Virendra March 10, 2013 at 4:45 pm

facebook like box is just amazing.

i am about to add it, i think i love it.

Thanks a lot bro :)
Virendra recently posted..Rail Budget 2013 Highlights – Indian Rail Budget 2013My Profile

Reply

Leave a Comment

CommentLuv badge

Previous post:

Next post: