How To Add Floating Facebook Like Box in Blogger

Add Floating Facebook Like Box in Blogger Easily 

Adding floating facebook like box in blogger is become passion and it makes your blog attractive to. but most of new blogger can't apply this plug in their blog lack of knowledge of blogging and coding.



You can get many way to add floating facebook like box in blogger but there is more difficult code to understand you, may be you can't apply cause there is lots of code you most have to apply inside your blogger. that's why some time blogger unable to add floating facebook like box plugin in their blog lack of understanding of coding. Now today i am gonna share a simple idea to add Floating Facebook like box plug in your Blog. Its a much simple way to add  floating facebook like box in blogger then other ideas. You just copy the below code and need some changes with it by your facebook fan page url and get a gadget pest it and save it. that all.

Now Lets Follow the Some steps :-

1. Go to Layout
2. Add a gadget 
3. Select HTML/Javascript gadget
4. Pest The Below code in this gadget And Save It

<script type="text/javascript">
 /*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYv9xE0a9GOqqW7xKOqkxEfWe__pn7XRdjzlEMiR3yXpz4KT5jmYuLF5GKGCBpS_labynhtNJPrC16cLTGQWqYDDGrvieECwnyPWVSWTH59gEXNp7caw_6WngSELS5xVovqcqH7NcBH6g/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%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/CyberDigit-274851872870344/"YOUR_FACEBOOK_FAN_PAGE_USERNAME"&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: 240px;background:#fafafa;"></iframe><span>Widget by :<a href="http://best-solution-here.blogspot.com/"> Best solution Here</a></span>
     </div>
 </div>

Note:- Replace your facebook page Name with "Your_Facebook_Fan_Page_UserName" And replace your Facebook Fanpage Url with "https://www.facebook.com/CyberDigit-274851872870344/"

Now your Done :)

Previous
Next Post »