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/AVvXsEgqICytZiK7YRm6CMxJ9cvqHK5hENRPWgE-0Rv0bBdVn1N6yfXpd7XMfzm4t6brt9DaLu2QWFgZw9KqwNXmNlruT2nNcFRIN3sT27Dnd1B6Lb9sTh1umO736GcGGANjKgHu1h6Ev3saA-c/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!

Share on Google Plus

About Unknown

My Name is Usman Ali and i am SEO Consultant, Online Mentor who has been working since 2012. Blogging is my pession. I can help you in Make Money Online, Blogging, Teachnology, Tips and Tricks, How to and Specially SEO Related issues.