Static Facebook Pop Out Like Box Widget With Smooth JQuery Hover Effect to blogger

Visit Our Blog, and download free games and softwares and more

Today's Tutorial is How to add Static Facebook Pop Out Like Box Widget With Smooth Jquery Hover Effect to blogger

Facebook Like Box allows your visitors to get your updates/notifications in an easy and convenient way. This box allow your visitors to join your community with ease of a single click. After subscribing, the person will receive all the recent updates on their feeds. So, today in this tutorial i am going to show you that how to add a floating Facebook like widget for Blogger that slides to the left on mouse hover. And it will increase your fans quickly. 

How to add static facebook Pop Out like box to blogger :

Step 1. Log in to your blogger dashboard, go to Template >> Edit Html
Step 2. Search (Ctrl + F) For this tag:

</head>

Step 3. Add the following code just above/before </head> tag.

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

Step 4. Save the template.
Step 5. Now goto Layout >> Add a Gadget >> Choose HTML/JavaScript From the list of Gadgets  and in the HTML Box Paste the below code.

<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.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/AVvXsEgrWSBTGJknjPL3rdDs8QkQ0oSwz0VNyO42omFJPlQtqfdhLgblXUaHNCf0wKEyn9pN9Mj_B3ZBHvtuzrOZDpCotnQz9YVJRbi-RBQRP_kDVrUHsxlFCpNbOE_66yP06rFRYWRvmqalav4/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(tct){
        tct(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            tct("#fbplikebox").css({right: -250, "top" : 100 })
            tct("#fbplikebox").hover(function () {
                tct(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                tct(this).stop().animate({
                    right: -250
                }, $dur);
            });
            tct("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=Facebook Page Url&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;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>

• Replace Facebook Page Url with the Url of your facebook fan page.

• Now click on save.

Please Share and Comment on this post if u like this widget. If you face any problem don't hesitate to ask in the comment section.