Floating Facebook Widget for Blogger

Widgets are playing very good role in both wordpress and blogger blogs. Here is another stylish facebook like box, this widget is design in three awesome style and it will slide out smooth when you place your cursor on the widget banner due to the jQuery effect that i included. The method is very easy, you need to follow method step by step.

How To Add The Widget To Your Blog/Site

First thing is to add the java script code in template.

• Go to blogger.com and login to your account
• Select your blog and goto template section
• Click on Edit HTML
• Now find </head> tag by pressing ctrl + F and write this tag in box then hit enter
• After finding the </head> just above this tag, copy and paste the below code

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

Click on Save Template and You're done

Now its time to add Widget to your blog

• Goto Layout Section
• Click on add gadget any where on layout page and select HTML/ JavaScript
• Copy and Paste the Below Code

 </script> <script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".mtwlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .mtwlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV47TkYqA3dfiolV7t6hRZqp5YNJfIWvq_J4ZgM4pKXFm7x8zeOIsJzUPT5bkiZSQnNmV3DaPYJwF6Nv-L2D7kvY0ZGxkhzsVAJqxfET3q9-B_vksLZshedsNxdmCjDY5VRgcBfWsjUDM/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .mtwlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .mtwlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .mtwlikebox span a{color: gray;text-decoration:none;} .mtwlikebox span a:hover{text-decoration:underline;} } </style> <div class="mtwlikebox" style="">     <div>     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ffreebloggerthemes&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://blogger-templatees.blogspot.com/">BloggerTemplates</a></span></div></div>

Time to customize it

— Page Link : Replace the orange color text with your Facebook page's username

— Border Color : Replace the yellow color value with your targeted color code for your widget's border color

— Position : Replace the green color value with your targeted position value you can use px instead of %

You're done the widget is successfully added to your blog.