Facebook Slide Out Like Box Widget For Blog !!

This widget is designed in three awesome style and it will slide out smooth when you place your cursor on the widget banner due to the jQuery effect . Simply follow the steps below to add this widget on your blog.

STEP 1

If you have already add jquery plugin to your blog, then skip the step else follow the steps below.
Go to your blogger dashboard
Click on "Design" > "Edit HTML"
Use ctrl to find <head> and paste the following code inside/after <head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Click "SAVE TEMPLATE"

STEP 2

Go to "Design" > "Page elements" > "Add a Gadget"
Choose "HTML/JavaScript" from the list of the gadgets and paste the code below in the content box and leave the title blank.


<script type="text/javascript">/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".rblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/</script><style type="text/css">.rblikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGJAhOtGeE4p3u1puPb8LI2KFb-GK4_zafeZXPDTKQmTlTXtYKmY7QCg45SPeliDNwfzPy5Um9qZeILmw4xnPN6JY2SghZ7o3AnbBn0X9cdouCmOiu4SyoVo1el_pqCVWeriuxatv-pM/h120/rb+facebook+slide+out+widget.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 42px;width: 245px;z-index: 9999999;position:fixed;right:-250px;top:20%;}.rblikebox div{border:none;position:relative;display:block;}.rblikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}.rblikebox span a{color: gray;text-decoration:none;}.rblikebox span a:hover{text-decoration:underline;}</style><div class="rblikebox"><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/computer.freaks07&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div><a href='http://realcombiz.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-d5eAWhN4K13a1PL3-dm-Mq9a87sa9hPXvfItsyIZX3t5AlJhTgNxKt48r969A378Fd9_qoUh6Hm2IuisXBXOH-TiRse2MbdWIsk5RJu5s_ugV4ZB1iCAoHGAXwA8xvxxZBi9Ap7dSRI/s1600/1x1juice.png'/></a></div>


Replace your Facebook fan page username in my case its computer.freaks07
You can also change the size of box in my case its height: 270px width: 245px . To chane just replace this value as you desire.
Choose from any of the three style and replace IMAGE URL with the image url of the style you choose

STYLE 1