Add static facebook pop out like box with smooth jquery hover effect

Hey friends, here is the another widget of facebook i.e, ‘pop out static facebook like box with smooth jquery hover effect’ for your blogger (or) website.Advantages of this widget is getting free space on your web page.because you can avoid Normal facebook like box

There is easy steps to get this widget(pop out static facebook like box with smooth jquery hover effect’ ) for your blogger.

 

Part1

Jquery plugin (Avoid this step if you already have jquery plugin)

1.Go to blogger->> Design or Template –>> Edit Html

2.Search for the code </head> and add below code just above it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"
type="text/javascript"></script>

3.Save template.

Part2

Html code

4.Layout or page elements –>>  Add a gadget->>  Html/java  script.

5.Add a below code in the Html/java scipt box.

<script type="text/javascript">//<!--$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});//--></script><style type="text/css">.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjweN4OYsSsuGVnnRkWIjquErV4-TuKFtzfevFATLSUX3rWSn7g55PgRYj-dQKspGtP6w6-rwLFSKDUrVi3a_gdqbcRBNWzCnWUsEl99vAl2S95zEugNGkHia3DLb1dUP6k9DexPEFKLadQ/s150/w2b_facebookbadge.pn") 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: 6px;text-align: right;z-index: 99999;}.w2bslikebox span a{color: #808080;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%2Ffacebook.com%2Fpages%2FModifymyblogs%2F191755004247458&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>By <a href="
http://modifymyblogs.blogspot.com/">modifymyblogs</a> / <a href="#">+Get This!</a></span></div></div>

6.Save and you are successfully done.

By modifymyblogs / +Get This!

Note:-Don’t forget to change Red colour keywords.