Jquery Facebook Like Box Popout For Blogger

This is a cool jQuery Facebook Like Box Pop out for blogger. The Facebook icon(as shown in the image) floats at the right side of  webpage and on hover it pop outs showing the facebook like box.This like box will increase your likes as well it does not takes any extra space for it. This is the main advantage for this widget. This widget is awesome looking. So have it in your blog.



      

Steps To Add Facebook Like box Pop out

     Step.1

1. Login to your Dashboard.
2. Go to Templates---> Edit Html.
3. Find for </head> tag.
4. Copy and paste the below code after </head> tag.

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

Now, Click on Save.

   Step.2

1. Now, Go to Layout.
2. Click on Add a Gadget.
3. Choose for Html/Javascript.
4. Copy and Paste the below code there.

<a href="http://blog-toolz.blogspot.com" target="_blank" title="Blogger Widgets"><img src="" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript">

//<!--

$(document).ready(function() {$(".blog-toolzlikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.blog-toolzlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2-2gXRILtnVTEB50Rb6h-p5aAPOuU5lUtTQNhqF3cXonvM6INH7unzLhilbv2T_yuQ-G0dmSwKYWsE0ZhYcHY8zZgIqVNqMJJR7AR9MYnf5aYURjyZ2KObxyjuxqw8MLQgtx-J7UduKH/s1600/facebookbadge.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%;}

.blog-toolzlikebox div{border:none;position:relative;display:block;}

.blog-toolzlikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.blog-toolzlikebox span a{color: #808080;text-decoration:none;}

.blog-toolzlikebox span a:hover{text-decoration:underline;}

</style><div class="blog-toolzlikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/BloggingTrickzAndToolz&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://blog-toolz.blogspot.com/">Blogspot tutorial</a> / <a href="http://blog-toolz.blogspot.com/">+Get This!</a></span></div></div>

Note: Change the red text with your username.

• Now, click on Save.

It's Done.

Categories: Blogger Tricks , jQuery , Social Media Gadgets