Add Static Facebook Like Box With Smooth J-Query Hover Effect In Blog Or WebSite

Facebook jquery pop up for facebook like box widget for bloggers (or) website. Advantages this widget is to free space on the page. Because Facebook can prevent website normal as the box. Static Pop Out Facebook as soft box with jQuery effect of activation for the blogger, this is another cool control. Here I have added as the box with simple jQuery hover effect. See Facebook static plate to the right of the page and move the mouse over the plate with the frame, as is visible by sliding to the left.

Just add it now and increase your fans and spice up your blog and website by saving space and having awesome look.

CLICK HERE TO SEE DEMO

Features:
1.) J-Query POP OUT On Mouse Hover.
2.) Facebook Awesome Big Fans Widget.
3.) Quick To Load And Easy To Install.
4.) Awesome, Simple, Stylish And Beautiful Designed Latest Widget.
5) You Can Also Add This On Website. (Feel Free To Ask How To Do This?)


How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Edit HTMlL
4.) Now Press {CTRL+F} And Find </head>.
5.) Now Copy The Below Code And Paste It Before </head> .
6.) Click Save, Now Proceed To The Next Step.

   

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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: -249}, 500); });
});
</script>

7.) Now Go To Layout.
8.) Click "Add A Gadget" Where You Want To Add It.
9.) Now Scroll To "HTML-JAVASCRIPT"
10.) Click "+" Icon To Add It.
11.) Now Copy The Below Code And Paste It To There.
12.) Leave The Title Empty.
13.) Click Save, Now You Are Done.

   

<style>

img, a { border: 0; }

#on {visibility:visible;}

#off {visibility:hidden;}

#facebook_div {width:245px;height: 260px;overflow: hidden;}

#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 260px;position: fixed;right: -249px;}

#facebook_right img {position: absolute;top: 70px;left: -35px;}

#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}

</style>

<div id="on">

<div id="facebook_right" style="top: 30%;">

<div id="facebook_div">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSANH-w9ZblAdWMSai3jtjl5l7PGOw7o0CduRCiMbO37mwTwEHQnRmpM65MljWMENcFu7k0hwBtE6nCnyWH88Ch8N_WDL1JYrUVqiQeGJE7hbEuHGVv0V6rBP2VpmmgBS38U7mlaSpyA/s1600/Facebook.png" />

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FMediaFireMoviesHeaven&amp;locale=en_GB&amp;width=245&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=260" scrolling="no"></iframe>

</div>

</div>

</div>

Customization:
1.) Replace MediafireMoviesHeaven With Your Facebook FanPage UserName.
2.)Save And Enjoy...
3.) If You Want More Customization, Feel Free To Ask.

Source:www.exeideas.com