New Facebook Floating Like Box (Updated)
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.
Adding Jquery Plugin
1. Sign in to Blogger2. 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. - Also Read Facebook chattinng tricks with codes
Adding Widget Code
1. Go to Design>Add a Gadget>HTML/JavaScript2. 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgE0TWdQUe5gFvO_UB01DI6GO3eMWJ-UtEL5y4xY4B8QPMou_G99-BodfCS8KSgygjtUrBB7gQldN2YT8qZk9G_ecrtBcl9pYtE27dCtIS4br0z9EFMaKK8hZwTpgBdtpSMR2CjyDMa8/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%2Fvikramhacks&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe><span><a href="http://thebest-technic.blogspot.com/2012/09/add-floating-facebook-like-box-for.html" target="_blank">+Get This!</a></span></div></div>
Replace http%3A%2F%2Fwww.facebook.com%2Fvikramhacks, with your Facebook fan page URL.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
0 comments:
Post a Comment