• 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4IK8f6x6oGbCOgYUc-47BsDeoeT2CCxRu2MhRoHd3Fkhmq54KbsbmIomlQIf_OZB-X9onronWkF42P7ziyJ8RZQzEqAR-dJuKYi8nWaUO0mCBient7k_gsS9pgBr4QL-HqXL3Wg2xi-Hq/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
    Comments
    0 Comments

    No comments:

    Post a Comment

    Thanks For writing a comment on my blog.

    ဒိမွာ member လုပ္ရင္ Join this Site ကုိနွိက္ၿပိး Email ႏွင့္ယင္ပါ