How To Add Floating Facebook Like box, 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, Slider that hides the Likebox inside a container and reveals it only when visiters hovers the cursor on the floating button. So lets add this cool floating like box to your blogger blogs.
STEP 1. Adding JQuery Plugin To Your Blogger Blogs
1. Go To your Dashboard > Design > Edit HTML
2. Search for </head> before it Paste the following JQuery code.
3. (Ignore this step if you have already added JQuery Plugin to your blog).
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
4. Save Your Template.
STEP 2. Add Floating LikeBox To Your Blogger Blogspot
1. Go To Blogger > Design > Page Elements
2. Click on "ADD A GADGET"
3. Choose HTML/JavaScript Widget
4. Paste the Following Code inside it.
<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/AVvXsEjTSAG7Td7tJs4nVm3_aVsZnDnL8fj3DojncdgAYQ343t-0QRk7gbaJSAAVreIkLj6VSmkAWf3RsITv_vW3DLEvzpfere4xBdfJcMs9-s6mjEkUrLPqybvz7TTDp_n78syzEkxNPD7-wMY6/s1600/facebook1.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: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #FF9D00;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://www.facebook.com/mytopfreeware&
width=245&colorscheme=light&show_faces=true& connections=8&stream=false&header=false&height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.blogger4ever.com">Blogger 4 Ever</a></span></div></div>
http://www.facebook.com/mytopfreeware
if you have not yet created a Facebook Username to your Fan Page then Create it, Once you create a username then replace mytopfreeware with your newly created username.
5. Save your Widget!
Visit your blog to see it floating at right side of your webpage. That's it
Enjoy!
0 comments:
Post a Comment