How to add floating Facebook like box widget for Blogger

Having a Floating Facebook Like Box can help get more Facebook likes and make it simpler for you to impart to your fans and get some attention. Social Media Play very important role to increase your website traffic.





So, In this article we are discuss How to add floating Facebook like box widget for blogger.

Step # 1: Login to your account and go to Layout > Add a Gadget


Step # 2: Click on HTML/Javascript


Step # 3: Copy the following code and paste in to the HTML/Javascript box

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg67L3dd1MUC4JQnqaKQXKhLM-vYHnq96FrK8k94yrbOXfnboM4lAMJgJMXtbXuRwYQUkUqJU-cq1GLUHOOwmVb5Zi_t-tZq215jEWKb24viB7oxwNlhKoKes1UoPSuKivw-nqfGGWE_FU/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:10%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style="">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/urusername&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true">
</iframe></div></div>
Note; Replace remarked page URL with your facebook page URL

Save. Done!


0 comments:

Post a Comment

Blog Archive