Floating Facebook Like Box Widget For Blog or Website
Floating Facebook Like Box Widget For Blog or Website
Generally many website or blog Use fixed Facebook like Box in their pages. But using fixed Facebook like box on the blog or website page may consume valuable spaces of the blog or website page. That is why many blog or website owner don't want to add fixed Facebook Like Box. Floating Facebook Like Box may be the solution for this problem. Lets see how to add floating Facebook Like Box.
- Follow the below steps to Add Floating Facebook Like Box:
- At first log into your Blogger Account.
- Then click on the Template option.
- Now click on Edit HTML.
- Here in the HTML page Search for <head> and Copy and Paste the below code just Below the <head> tag.
- Then click the Save Template button.
- Then click on the Layout option.
- Here you will get several add a gadget button.
- Now click on Add A Gadget button. ( you can choose anyone ).
- Then from the gadget list click HTML/ JavaScript.
- Now Copy and Paste the below Code in the Content box.
- Customization
<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/AVvXsEjuFm_G2alwSLyrDE4uUv7Ag7Om7F9jUTiOffamz5JiKRlI-JWSQgxH6hdA_vw98VWzTVUHS9RBE7r_edJoSA0SJQqzhed-adFqPs_SvqoMabicwsw6tMFuX_I9q3tP8NZcWON0AQAm3Vw2/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>
//<!--
$(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/AVvXsEjuFm_G2alwSLyrDE4uUv7Ag7Om7F9jUTiOffamz5JiKRlI-JWSQgxH6hdA_vw98VWzTVUHS9RBE7r_edJoSA0SJQqzhed-adFqPs_SvqoMabicwsw6tMFuX_I9q3tP8NZcWON0AQAm3Vw2/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%2Fehimini&width=245&colorscheme=light&show_faces=true&
connections=9&stream=false&header=false&height=270"
scrolling="no" frameborder="0" scrolling="no" style="border: medium
none; overflow: hidden; height: 270px; width:
245px;background:#fff;"></iframe><span>Widget by:<a
href="http://livetechnologybd.blogspot.com">A Information Technology
Blog</a></span></div></div>
- with your Facebook Page Username.
- The click the Save button.
Comments
Post a Comment
FOLLOW US ON FACEBOOK: https://www.facebook.com/unitechsity
:::. .:::
:::. .:::
Share or Like this Post - if you Find it Informative and Cool…
Thanks. Never miss any of my future post
CLICK HERE TO SUBSCRIBE
http://feedburner.google.com/fb/a/mailverify?uri=unitechsity
Once entered, you will have to check your inbox for a confirmation email containing a confirmation link. Once you VERIFY your email by clicking on the confirmation link in the message, you will never miss any future articles.
.