Add Static Facebook Popular Out Similar Box Alongside Polish Jquery Hover Effect

In this tutorial, I volition present y'all how to add together a cool floating Facebook similar widget for Blogger that slides to the left on mouseover. Demo: You tin encounter a static Facebook badge on the correct side of this blog:

Demo blog

Adding Static Facebook Like widget on Blogger

Step 1. Log inward to your Blogger account, become to "Template" in addition to hitting the "Edit HTML" button

Step 2. Click anywhere within the code expanse in addition to press the CTRL + F keys to opened upwards the search box:

Step 3. Search (CTRL + F) for this tag:

</head>

Step 4. Add the next code merely before/above </head> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Step 5. Save the Template.

Step 6. Go to Layout > Add a novel Gadget > pick out the 'HTML/JavaScript' gadget in addition to glue the code below inward the HTML box:

<style type="text/css">
#fbplikebox {
    display: block;
    padding: 0;
    z-index: 99999;
    position: fixed;
    background: #ffffff;
}

.fbplbadge {
    background-color: #3B5998;
    display: block;
    height: 150px;
    top: 50%;
    margin-top: -75px;
    position: absolute;
    left: -47px;
    width: 47px;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ZEwXDXxVMNYy04DosqX5RXUJ9UfNitBG1k61CQ_4E3r6vUhFbtz7hztju5t-is3T7V4j39qz4FApHgV-jO_MzjsiykLcocLvak68DgwTwjWGYqxD-48CmK443bpl_1iF0IuUgj6U5b8/s1600/vertical-right.png");
    background-repeat: no-repeat;
    overflow: hidden;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, business office () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe>
</div>

Step 7. Replace YOUR-FACEBOOK-PAGE text amongst your Facebook fan page URL. Then, y'all volition ask to supercede the next characters inward the URL, equally follows:

The  :  symbol with:

%3A

The  /  symbol with:

%2F

For example, the Facebook fan page of this spider web log is:

http://www.facebook.com/pages//120574614736021

After replacing the higher upwards symbols, the Facebook fan page would hold off similar this:

http%3A%2F%2Fwww.facebook.com%2Fpages%2F%2F120574614736021

Other settings (optional):
- to alter background color of the fan box, supercede the #ffffff value inward red. You tin pick the favorite color using this Color Code Generator.
- to alter the Facebook badge color, supercede the #3B5998 color value amongst your own.
- to alter the width in addition to elevation of the Facebook box, alter the values inward cherry-red (250)

Step 8. Now y'all tin salve this static Facebook fan box widget - press the 'Save' button. Enjoy!

Credit goes to Harish (way2blogging)

Share this post