0 Add Floating Facebook Like Box for Blogger

Many tutorial gives you how to add floating facebook like button. Now I came up with new 
tutorial for adding floating like box to blogger. This is a great way which requires almost no 
space and it looks more attractive than that of simply keeping the like box.

LIVE DEMO

Adding Jquery Plugin

1. Sign in to Blogger
2. Go to your Dashboard>Design>Edit HTML
3. Add this code above the closing </head> tag in your HTML file:

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

Ignore thies step if you have added Jyquery plugin to your blog.

Adding Widget Code

1. Go to Design>Add a Gadget>HTML/JavaScript
2. Add This code to HTML/JavaScript Widget

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBloggerHacks&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://www.bloggerhack.com/2011/11/add-floating-facebook-like-box-for.html" target="_blank">+Get This!</a></span></div></div>

Replace http%3A%2F%2Fwww.facebook.com%2FBloggerHacks, with your Facebook fan page URL.

Remember!

Before replacing URL, replace these symbols:
: with %3A
/ with %2F

for example, if your URL like this:

http://www.facebook.com/pages/BloggerHack/1234567

It will look like this:

http%3A%2F%2Fwww.facebook.com%2Fpages%2FBloggerHack%2F1234567

Feel free to share with us if you have any problem.

Anda sedang membaca artikel tentang Add Floating Facebook Like Box for Blogger dan anda bisa menemukan artikel Add Floating Facebook Like Box for Blogger ini dengan url https://doyshinja.blogspot.com/2012/06/add-floating-facebook-like-box-for.html ,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Add Floating Facebook Like Box for Blogger ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Add Floating Facebook Like Box for Blogger sumbernya.