Portal of all Blogger widget, Airtel USSD Codes, Facebook Hack, Free Internet Tips, PC and Blogger Tricks

Breaking

Sunday, 7 July 2013

SLIDING FACEBOOK LIKE BOX

How To Add Floating facebook Like Box in blogger

Follow these Two simple steps given below 
  • Got to blogger>>Layout: 
  • Add a Gadget>>Html JavaScript Gadget: 
  • Inside Html/JavaScript Gadget Past below code
CODE:
//<!--
$(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/AVvXsEiprYfa069tzHnlDmZv0NCFGJD7V-VyRMNM3BOz_fqrnqUR6cxEDur1ukOQN6upwxHFE4Zh2crSF11GKQnlpRTQnRiLusda9q62lteRThQFkL3SiCUzG02wkB4vg0Skpo7PmjIw6J5zVwXz/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=http%3A%2F%2Ffacebook.com%2FAllin1web&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

Now you have done step one comes here what the next:


  • After adding the above code in layout html JavaScript Gadget:
  • Now go to dashboard >>Edit html
  • Find </head> tag and just before it past the below code.

CODE:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Now you have done all most click on save template and visit your blog you will see facebook pop up like box on right side of home page. 

Facebook pop like box Customization

Two possible customization you have in this widget first one is change Allin1web with your own facebook fan page username. and the second is if you want to appear this widget on left side then simply change float: right to float: left and you have done 

No comments:

Post a Comment

Notice: Don't add "backlink". Text with Link will automatically Removed.