How to Add a Facebook Widget Floating Like 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 page.

 This slide widget will show in middle of right side of your blog when touch by cursor it come outside with like button.

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

 How to add widget in blogger?

  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.

CODE
<!--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/AVvXsEhPJPGKVeW5cCsQ-tJQNMwn_LM5a3hGv3gt2rZfK7PTy4ZdYZCq0_XdevbrMnmGQ3X_xKJZu-jya2TZ0Dq-A-B2O8Fl5F0suPz5JMod5IxwJyjssfwTQwl2-xZm5fBVPycwgjds08knNtlF/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%2FWorld4us.in&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></center>
</span></div>
</div>
<!--Floating Facebook Widget END-->

Note Replace World4us.in with your facebook page ID

How to Add a Facebook Widget Floating Like Box For Blogger How to Add a Facebook Widget Floating Like Box For Blogger Reviewed by FreeSV on 8:43:00 PM Rating: 5

No comments:

Powered by Blogger.