How to Add Static Facebook Pop Out like Box i Sidebar with Smooth 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://modernhakerss.googlecode.com/files/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHpEm_OrutRtbZlftGYgtWTJmPEbxwo4Rdcpuq4qFkDEesByd2kKLq6rdnvmI3VB_Xi15SxjOiSojtQSxi8HYtw8hhYSZjqrC2wNOlp3KRZgv0iFsByNQtj7o_cQtyYPrsSlbGPBuk3bII/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%2Fpages/Modernhackerss/229304697206442&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.Modernhackerss.blogspot.com">Modernhackerss.blogspot</a></span>

            </div>

        </div>

 NOTE:-REMOVE RED LIGHTED "pages/Modernhackerss/229304697206442" WITH YOUR PAGE NAME

AND THE SAVE AND ENJOY


For any Help Please Comment Here...