How to Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

SOCIALIZE IT

Tweet

0

Facebook is the number one social media website. and it gets a lot of monthly unique visitors and it have 1 billion users. It's the best place to promote your website and get new visitors for your blog.

You must have social sharing widget in your website, so people will share your posts on facebook easily. And facebook will drive traffic to your website.

and it's a cool widget which save space and it's a eye catching widget. After telling it's advantages then if you want to add it to your website then follow my instructions.

Adding Static Facebook Pop out like box with smooth Jquery Hover Effect:

Step 1: Open blogger dashboard.
Step 2: Click on the template button, then click on the "EDIT HTML" button.
Step 3: Search (Using CTRL + F ) to find the following code.

                                                    </head>

Step 4. Add the below code before/after </head> tag:

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

Step 5: Save the template.

Step 6: Now Open Layout>Add a gadget> Choose HTML JavaScript and paste the below code in the HTML box.

 <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/AVvXsEiAcGpZNq4_gwr8hCgSgT6af1nFG2bdVDv4nB19Yb8WNd56VrmQPGhE06XZKWD3GPwI_6TubyFcQVlOV135RoZjLIK8-zBeDIc9bjzRO3zgL7JTKNDOf-lHe0xt4fpzpZsL-PFkhxSlGf8/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);
}, function () {
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;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>

Step 5: Replace YOUR-FACEBOOK PAGE  with your facebook page URL.

Now you're done, 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.

Do You Like This Post ?