Add Stylish Floating Facebook Like Box Widget In Blogger

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

floating facebook likeboxI 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.

8 thoughts on “Add Stylish Floating Facebook Like Box Widget In Blogger”

  1. 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!

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

      1. 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

Leave a Comment

Your email address will not be published. Required fields are marked *