Facebook Static Pop Out Like Box with jQuery Effect for Blogger

Posted by albin thomas

Here is a Tutorial about how to add a static Pop out Like Box with Cool jQuery hover effect.This a Awesome Blogger Blog Widget that adds a little beauty to your blog.

After installing this Widget a Facebook Logo will appear on the right side of your Blog.When you Mouse over that Logo it Pop out with Smooth jQuery Effect.

Follow the instructions for installing this Widget.

Install Facebook Pop Out Like Box Widget

  • Go to Design-> Page Elements
  • Click on Add Gadget
page elements blogger
  • Select HTML/Javascript from it
  • Leave title as blank ,Copy and Paste the below code into the content section.

<script type="text/javascript">
jQuery(document).ready(function() {jQuery(".noopslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
<style type="text/css">
.noopslikebox{background: url("http://1.bp.blogspot.com/-Tka_Jf2EbuQ/Tz-PU1EH76I/AAAAAAAAAIQ/8FxGt44NHPo/s1600/fb_static+button.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 999;position:fixed;right:-250px;top:20%;}
.noopslikebox div{border:none;position:relative;display:block;}
.noopslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}
.noopslikebox span a{color: gray;text-decoration:none;}
.noopslikebox span a:hover{text-decoration:underline;}
<div class="noopslikebox">
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/rechargetips4u&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe>

  • Replace the RED highlighted text with your Facebook page URL.
I hope you'd liked this Article,if so please share, like this. 


Feel free to drop your feedbacks;
Its our pleasure to hear it from you...

also see Recommended articles for you

Don't Forget To Join Our Community