I found a script online that adds a floating Facebook button to right side of your blogs or websites. The button upon clicking slides towards left revealing a Facebook Like Box. It is an excellent coded slider that Hides the Likebox inside a container and reveals it only when visitors hovers the cursor on the floating button. You can use the same code to add it to your websites or any webpage you may have. So lets add this cool Floating Like Box to your blogger blogs.
Add Floating Likebox To Blogger
- Go To Blogger > Design > PageElements
- Click on "Add a Gadget"
- Choose HTML/JavaScript Widget
- 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/AVvXsEj44WY2WxE8FqIXYMNG40-N-EdY6c7J5g9Viu31-Y1Ru2U9vAskWCn_cx3_XVMqd6dMwNPopbFNEhZZt7NVfqk25QN4JIhK6e9fwy-HwV90SKecWVJrBVDmoR7UfjYRzT4E6juO6pw9EX9e/s150/w2b_facebookbadge.pn") 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%2Fblogger&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&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.MacroFiles.net">Macro Files</a></span></div></div>
If you have not yet created a Facebook Username to brand your Fan Page then create it in seconds by clicking this link Once your create a username then replace blogger with your newly created username
6. Save your widget
7. Now go To Design > Edit HTML
8. Search for <head> and just below it paste the following JQuery code, (You can ignore this step if Jquery Link is already added in your template)
9. Save your template and you are all done!
Visit your Blogs to see it floating at the right side of your webpage. I hope this widget helps you in increasing the number of your Facebook Readers.
0 comments:
Post a Comment