Sunday 22 July 2012

Add Floating Facebook Like Box for Blogger

Posted by Unknown at 11:01:00
Many tutorial gives you how to add floating facebook like button. Now I came up with new tutorial for adding floating like box to blogger. This is a great way which requires almost no space and it looks more attractive than that of simply keeping the like box.






Adding Widget Code:

1. Go to Design>Add a Gadget>HTML/JavaScript
2. Add This code to HTML/JavaScript Widget

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function()

{$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRLxk7yCxxp48wh4y-Ar0jqGayLtjGfMWpnwYVK6EbWuozCfRbxJM7JYZ0VBL2r5e-rO0RoCf-wguAOYH0LYosNixyvKHeUUpqaINuz2b4_RlC4TA4VTsjWls2uCmIqjDxkACAsvC66l0/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .floatinglikebox div{border:none;position:relative;display:block;} .floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .floatinglikebox span a{color: #808080;text-decoration:none;} .floatinglikebox span a:hover{text-decoration:underline;} </style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fshakeelsoft&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://shakeelasghar.blogspot.com/2012/07/add-floating-facebook-like-box-for.html" target="_blank">+Get This!</a></span></div></div>



Replace https%3A%2F%2Fwww.facebook.com%2Fshakeelsoft, with your Facebook fan page URL.


Remember!
Before replacing URL, replace these symbols:
: with %3A
/ with %2F

for example, if your URL like this:

https://www.facebook.com/shakeelsoft

 

It will look like this:

 

https%3A%2F%2Fwww.facebook.com%2Fshakeelsoft

 
 
Feel free to share with us if you have any problem.
 
Like Us.... Receive updates on your Facebook wall!!!!


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!


Kindly Bookmark and Share it:

0 comments:

Have any question? Feel Free To Post Below:

Related Posts Plugin for WordPress, Blogger...

Blog Archive

 

Popular Posts

Live Score

© 2011. All Rights Reserved | SHAKEEL ASGHAR |

Home | About | Top