LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Social Sharing / Website Social Sharing » Add Static Facebook Like Box Widget With Smooth J-Query Hover Effect In Blog And Website

Add Static Facebook Like Box Widget With Smooth J-Query Hover Effect In Blog And Website

Add Static Facebook Like Box Widget With Smooth J-Query Hover Effect In Blog And 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.


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="http://1.bp.blogspot.com/-yUI3Og8Esko/TyywzMTqmsI/AAAAAAAABMs/z-tTK2uUS-0/s1600/Facebook.png" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FEXEIdeas2010&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 EXEIdeas2010 With Your Facebook FanPage UserName.
2.)Save And Enjoy…
3.) If You Want More Customization, Feel Free To Ask.

You Like It, Please Share This Recipe With Your Friends Using...

25 Responses to “Add Static Facebook Like Box Widget With Smooth J-Query Hover Effect In Blog And Website”

  1. EXEIdeas says:

    Thanks,,,Subscribe Our Newsletter To Get New Article Direct Into Your Inbox…

  2. Sid says:

    How do i add this thing for wordpress ?

  3. works for website Hassan?

  4. Imalsha says:

    Not working for web pages
    please help

  5. Francisco says:

    Thanks for the tutorial is easy to understand and very useful

  6. Hi Muhammad Hassan i have added this widget but, this widget effects (stops sliding slider) on my existed Jquery slider. please tell me the solution for that.
    http://www.idleindia.com this is my blog address.

  7. Anonymous says:

    I’ve tested on website but it seems not working.
    FYI, I put first part in Head and second part in Body. It can’t animate.
    Can you please help? Thanks

  8. Anonymous says:

    Here’s the url (blank site) http://www.kimlu.com/tes.htm
    Please explain in more detail as I’m new to this. Thanks for the help

    • EXEIdeas says:

      The Code Is Fine But The Official Hosted JQuery In No More Working. Use Your Own JQuery. Send Us E-Mail So We Will Send Your The JQuery File.

  9. Anonymous says:

    I can’t find your email address so here’s email wanrenda@yahoo.com
    Thank you very much.

  10. Anonymous says:

    I need permission to access. Am I too late? (still less than 24hours).
    Thank you for your help. Really appreciate it.

  11. techravi says:

    hasan its not working plz verify this

    http://www.divyafashions.tk

  12. Bagy says:

    No working. Please help me! The cod is a signature blogspot.

Leave a Reply

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