Sunday, June 23, 2013

How to Add Floating Facebook Like box To Blogger


How to Add Floating Facebook Like box To Blogger

facebook like box


Here we are again with this terrific widgets. 
People, over the years use facebook like button but today i want to introduce you to an amazing facebook widgets. Slightly like our twtter, facebook, g+ float button Floating Facebook Likebox is a Slider that hides the Likebox inside a container and reveals it only when visitors hovers the cursor on the floating button.
The following steps will see you add this our amazing likebox into your blogger blog.


​​​ 
<script type="text/javascript"> 
//<!-- 
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); 
//--> 
</script> 
<style type="text/css"> 
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDuLTbnEx-BaLzjN4Y7bnTeBBOZKJfKIwGkDzPUbiJ9TscBWaC3sQqvHpJhPUiaZMa7TKrOmklLq9mRQTHLaBW9-9sYXWLgo-yrygmW2V5yCfwrhGwMdsUzUpgmR4q5YXGcUuTp0iRoT67/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} 
.w2bslikebox div{border:none;position:relative;display:block;} 
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} 
.w2bslikebox span a{color: #808080;text-decoration:none;} 
.w2bslikebox span a:hover{text-decoration:underline;} 
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=260" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 260px; width: 245px;background:#fff;"></iframe><span>Follow us on facebook:<a href="http://dailybloggiingtips.blogspot.com/"></a></span></div></div>
if you have not yet created a Facebook Username to your Fan Page then Create it,  Once you create a username then replace
https://www.facebook.com/pages "
 With your Facebook page Adress .
5. Click on save and we are done

3 comments:

  1. Great Very interresting.There are more Popular ebook Thank you for this ebook to get the Same Quality of ebook visite the link
    Ebook-Download Free Ebook

    ReplyDelete
  2. This post is very helpful to me. I like it very much. For the users http://techteachingbd.blogspot.com/

    ReplyDelete
  3. thank you for the post. I have added this gadget. keep doing the best.
    Live Technology-A Information Technology Blog

    ReplyDelete