Mar 31, 2012

How To Add Static Facebook Pop Out Like Box in Sidebar (floting) with Smooth Jquery Hover Effect


Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect for blogger, this is another cool widget just like a Static Twitter Follow me Badge, but here i added like box with simple Jquery hover Effect. You See a static Facebook badge at right of your Page and when mouse over the badge with like box is visible by Sliding to Left.






Here  are 2 Simple Steps To Add This 

Step 1:-Go to Blogger Dashboard < Design tab > Edit Html
Search for </head> tag
Add below line of code Before </head> tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>


Step 2:-And Then come to Blogger Dashboard < Design tab > Now click on Add a Gadget then choose HTML/JavaScript

And Now put The Following Code in It 





<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: gray;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style>
<div class="w2bslikebox" style="">
    <div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FVIKASH.BLOGS&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><span><a href="http://www.1vikash.blogspot.com">1vikash.blogspot</a></span>
    </div>
</div>

NOTE:-REMOVE RED LIGHTED "VIKASH.BLOGS" WITH YOUR PAGE NAME

AND THE SAVE AND ENJOY


HIT LIKE OR SUBSCRIBE IF YOU LIKE THIS POST
   

Any problem then pls comment below








Subscribe Updates, Its FREE!

5 comments:

  1. facebook icon to show ho gya hai but slide nai ho rha
    whats problem?

    ReplyDelete
  2. Just noticed this script doesn't work in IE... Any ideas on why not or how to fix it?

    ReplyDelete
  3. try Installing Latest version of IE and java software ..it should work .
    here you can get latest version of both http://www.filehippo.com

    ReplyDelete
  4. and Muhammad Zia Ullah it due to your page not loaded properly.i have cheeked your blog and was working..

    ReplyDelete
  5. Hi. First of all, thank you so much for this. I saw this done for Joomla and am so happy I can implement it now through simple HTML on my website.


    I've been fiddling around with the code (I am far from fluent in any coding language) but can't seem to figure out how to change the size of the Facebook tab and the content that pops out when highlighted. If you could point me in the right direction I would really appreciate it.


    Thanks!

    ReplyDelete

 

Copyright @ 2013 EgyTricks.

Designed by Vikash | EgyTricks