beautiful Sliding Facebook Like Box

For bloggers who have their own facebook fanpage, it is usual to put the fanpage on the blog. Normal to put in the sidebar, to this time i will also show how to hide facebook fan page beside your blog.

Tutorial hide Fb fan page is shown below.

Step 1:

i. From dashboard> design> edit HTML

ii. Using the find function, (ctrl + F), find the code </ head>

iii. Copy and paste the code below code BEFORE </ head>

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

Note: If you find the above code is already there before you copy and paste, skip step 1, go directly to step 2

Done Click save your template go to step 2

Step 2:

i. From dashboard> design> page elements> add a gadget> HTML / javascript

ii. Copy and paste the code below in the column HTML / javascript you have open

<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=URL PAGE ANDA&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://tutorialuntukblog.blogspot.com/2011/10/tutorial-sembunyikan-fb-fan-page-di.html">Tutorial Here</a></span></div></div> 

change URL PAGE with your facebook url page example http://www.facebook.com/username
click save and done
now you can see the beautiful sliding facebook box in you blog
if you have any question please let me know i will help you as posible as i can leave you comment