Pages

Friday, July 18, 2014

Floating Facebook Like Box Widget For Your Blog.

Welcome friends are you struggling to get Facebook likes? Then add floating Facebook Like box to your blog or website and receive more likes. The widget is in a fixed position on the Right Hand side on your blog or website. When people move mouse on Facebook Blue image,the like box will Slide.


How to Add Floating Facebook Like Box Widget.

1. Login to your Blogger account > Go to Dashboard Click on “Layout Tab” from left side and click on Add a Gadget Link.



2. After Click on “Add a Gadget”  Link a pop up box will open


3. Choose “ HTML/JavaScript” and  Copy” the code given below and add on your Blog.
Now Click on “Save” JavaScript you have don enjoy.




Copy Code:

Note Please :If your template already have a jquery do not put again, just copy after it

======================================================================= 

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<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/AVvXsEhUgzY49JPukvL5D9fZf2j7iXB9zXaFoP6Iev-09np76LCVgTX1xZf9oGqahIZ9rGILrr2DAX1UEOJHfEYbuGK4nVsxqdDEMGUCV8uCCLEODmVfM1bB1MEaNLu3FRtV3CSt04KTUqnFW6X3/s1600/facebookbadge.png") 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><a href="http://baigpcsolution.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://baigpcsolution.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Widget"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://baigpcsolution.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/BAIGPCSOLUTION/166579693496935
&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>
======================================================================= 
How to Customize Widget

In Customize Field Replace below code with your own facebook page name

=======================================================================  
pages/BAIGPCSOLUTION/166579693496935
======================================================================= 


No comments:

Post a Comment