Friday, February 3, 2012

How To Add Sliding Facebook Like Box To Blogger

Author: Gagan Masoun
How To Add Sliding Facebook LikeBox To Blogger
I know every blogger and webmaster have added Facebook like box plugin on blogs/websites. But they don't have make any type of activity. They are simple widgets on your blog. Today I am sharing wonderful tutorial with you inspired from MBT blog. This tutorial will tell you How To Add Sliding Facebook LikeBox To Blogger. After a long time, I am writing a post on Blogs Daddy. I hope you will enjoy this tutorial.

Add Sliding Facebook LikeBox To Blogger

How
In the demo you can see an image that float one the left side of the page when you put your mouse pointer on that image the image slide having a Facebook like box with a wonderful style, follow the steps below and see how you can grab this for your blogger blog.

1. Go to Blogger Dashboard > Page Elements > Add a Gadget 
2. Choose HTML/JavaScript Gadget
3. Copy The Following Code and Paste Inside The Gadget

<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("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.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>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fblogsdaddy&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><span>Widget by:<a href="http://www.BlogsDaddy.com">Blogs Daddy</a></span></div></div> 

Note:- Replace "blogsdaddy" with you page username. In case your Facebook Page URL looks like

“http://www.facebook.com/pages/BlogsDaddy/229511653738916″

Then better create a Facebook Username in 5 seconds by visiting this Link

4. Save Your Gadget
5. Now Go To Design > Edit HTML
6. Paste The Code Below In Header Section <head>Code In Between</head>

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

7. Save Your Template & Visit Your Blog It Is Working.

2 comments:

  1. bro i all of done but it is not work can u help me plz

    ReplyDelete
  2. @Adil Ikram - Have u done all the steps carefully and changed the fb page name?? just delete your cookies n catches n visit your blog again... thanks

    ReplyDelete