Floating facebook like button box for Blogger

Floating facebook like button box smooth sliding widget for blogger add social widget in your blog to increase like of your social pag...

Floating facebook like button box smooth sliding widget for blogger add social widget in your blog to increase like of your social page. This slide widget will show in middle of right side of your blog when touch by cursor it come outside with like button.

you can see live demo in this post Right side.

Add below given code in your blogger blog as a widget by HTML/JAVASCRIPT widget.

How to add widget in blogger?

1. Go to your blog Layout option > Select Add a Gadget option > select Html/Java Script option > Past the above code in Content area field and press save button.

 

<!--Floating Facebook Widget START-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abt").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abt{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-27hwkNAWNKEW9gkNMboG_QW-rstJXdgNwC9wwffot6AACdYmodQfdxJny2c31HpXC4bav8kgRHE333aTh5IZNPB-KcHZthyxUAHmktadcIj-U6aMoTeRHd5QlxNaSbwb6APxUvFYvGWx/s1600/ABT_facebook_widget.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%;} .abt div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abt span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abt span a{color: gray;text-decoration:none;} .abt span a:hover{text-decoration:underline;} } </style><div class="abt" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fcooltrickhere&width=245&colorscheme=light&show_
faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe><span><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://www.allbloggertips.com">Get This Widget</a></center>
</span></div>
</div>
<!--Floating Facebook Widget END-->

Note Replace with your facebook page ID