Add Stylish Floating Facebook Like Box Widget In Blogger

by Ammar Ali · 8 comments

This widget is not working anymore, Please visit Stylish Floating Like Box for Blogger Updated.

Add Stylish Floating Facebook Like Box Widget In BloggerI found this great Floating Facebook Like Box Widget on internet. This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. This is a great widget for blogger. Which will help you to increase facebook likes. You just need to put Jquery and CSS . HTML code to your blogger blog. I will soon share more floating widgets like Google+, Twitter Follower Box and Floating Subscription box in future. Now lets move to how you can add this in blogger I will show you How You Can Add Stylish Floating Facebook Like Box Widget In Blogger.

Updated Widget!

 

How To Add Stylish Floating Facebook Like Box Widget In Blogger

  1. Go To Blogger>>>Design>>>Edit HTML
  2. Tick Expand Widget Template
  3. Search For The Tag </head> (Using ctrl + f )
  4. Copy n Paste Below Code Before </head>
<link href=’https://gj37765.googlecode.com/svn/trunk/[www.gj37765.blogspot.com]multipopoutwidget.css’ rel=’stylesheet’/>
<script src=‘http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js‘ type=’text/javascript’/>
<script src=’http://apis.google.com/js/plusone.js’ type=’text/javascript’/>
<script type=’text/javascript’>
jQuery(document).ready(function(){
jQuery(&quot;#facebook_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -200}, 500); });    jQuery(&quot;#twitter_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#twitter_right&quot;).stop(true,false).animate({right: -250}, 500); });     jQuery(&quot;#google_plus_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#google_plus_right&quot;).stop(true,false).animate({right: -154}, 500); });    jQuery(&quot;#feedburner_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#feedburner_right&quot;).stop(true,false).animate({right: -303}, 500); });    });
</script>
Note :- CTRL + F To Find Above Red jQuery Plugin URL In Your Template If You Have Already This Plugin Than Remove It .

5. Now Save Your Template

Now Adding HTML Code It’s Simple

  1. Go to Blogger>>Design>>>Add a Gadget
  2. Choose HTML/Javascript
  3. Copy n paste below HTML code Into It,
<div id=”on”>
<div id=”facebook_right” style=”top: 18%;”>
<div id=”facebook_div”>
<img src=”http://1.bp.blogspot.com/-XyYjgghpO7A/TwqccHW47QI/AAAAAAAACSU/OvETkV56ui8/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.png” alt=”" /><iframe src=”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com/allbloggingtips&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356″   scrolling=”no”></iframe>
</div>
</div>
</div>
Note:- Replace allbloggingtips With Your Facebook User name

5.Now Click on Save Widget.

This widget is not working anymore, Please visit Stylish Floating Like Box for Blogger Updated.

Visit your Blogs to see it floating at the right side of your webpage. I hope this widget helps you in increasing the number of your Facebook Readers. That’s all. If you face any problem in floating facebook like box or any problem than don’t stop just drop your comments and Feel free to ask.

 
Did you enjoy this article?
Share
the
Love
Subscribe via Email!
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

{ 8 comments… read them below or add one }

1 Fahim January 25, 2012 at 7:31 pm

Looks cool, but it shows me xml error massage -”Open quote is expected for attribute “{1}” associated with an element type “href”" any help?

Reply

2 Ammar January 26, 2012 at 1:55 pm

May be you placed code in wrong place. Kindly read whole article again..

Reply

3 San February 5, 2013 at 7:37 am

it say same thing to me Error parsing XML, line 740, column 12: Open quote is expected for attribute “{1}” associated with an element type “href”. i did put in right spot
San recently posted..Student No.1 (2001) DVD (Hindi Dubbed Movie)My Profile

Reply

4 Japresents March 7, 2012 at 9:45 am

yaa.u r rite…it have some error….

Reply

5 shree January 25, 2012 at 10:12 pm

it works well for me

Reply

6 Ammar January 26, 2012 at 1:52 pm

It works for every one how is using Blogspot. Thanks for your comment!

Reply

7 nycxs July 22, 2012 at 12:16 am

LOL, really? No, it won’t.

Take out the script you currently have on your page and put the one above in. You’ll see…
nycxs recently posted..Who or What Is the Antichrist? : The Orthodox Christian Answer #1/2My Profile

Reply

8 Ankit February 15, 2013 at 11:31 pm

Friend, you did a great job by providing this great tips to the bloggers. This facebook like box is looking awesome than the default like box. You change the way of blogging. I will definitely add this facebook like box into one of my website. Great Job Buddy!
Ankit recently posted..Stylish Facebook Like Box Without BorderMy Profile

Reply

Leave a Comment

CommentLuv badge

Previous post:

Next post: