Add Stylish Floating Facebook Like Box Widget In Blogger

Published by Author

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

See screenshot below

 

How To Add Stylish Floating Facebook Like Box Widget In Blogger

Go To Blogger>>>Design>>>Edit HTML

Tick Expand Widget Template

Search For The Tag </head> (Using ctrl + f )

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.

 Now Save Your Template

Now Adding HTML Code It’s Simple

Go to Blogger>>Design>>>Add a Gadget

Choose HTML/Javascript

Copy n paste below HTML code Into It

<div id=�on�>
<div id=�facebook_right� style=�top: 18%;�>
<div id=�facebook_div�>
<img src=�https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhMYqfXhtMtwK_9wza0PGx6DcrD326vta-Nw082eQ5eKewG0HrvKQxUCAf1cPU7AuSx82oNJudc1y7CIa7GR3WE-Aju3FbPMiP6OCmpy2AnH60em-FrzZH0O1e14lBVUkCgIfyF6bvdpxw/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

Now Click on Save Widget.

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

Kindly Bookmark this Post using your favorite Bookmarking service: