Add Floating Facebook Like Box For Blogger

Facebook Like Box Widget is very important for very blog. As we know Facebook is biggest social media platform and also best place for sharing latest updates. Facebook is too much helpful to grow any kind of blog at faster speed. So it is necessary to use Facebook like box on your blog which lets your visitor to join you Facebook fans to gets latest post easily. I already post about the simple and stylish Facebook like box for sidebar if want, you can also that one. But today i am going to post about the floating Facebook like box widget. Which is very attractive and help to get more Facebook like easily.

Steps To Add Floating Facebook Like Box

• Go To Blogger Dashboard >> Then Layout

• Click on Add a Gadget

• Now Copy the below code and Paste them in gadget box

 <script type="text/javascript">
//<!--
$(document).ready(function() {$(".STlikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.STlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVn06DYSLGy14yHLjvtgU1Nw_RGEwTwjhBLOs9t3rs0fcd86qV_Q0ncNhj1NB1iFcLj4M9N57FaPJj8sS3Yh2bz9l8rqZImNs1iFVu0_j-eWKxAwtsYW_auRNKj21Iy5x6wmoeV7Zem2_r/s101/fbfloat.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 200px;padding: 0 5px 0 35px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.STlikebox div{border:none;position:relative;display:block;}
.STlikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.STlikebox span a{color: #808080;text-decoration:none;}
.STlikebox span a:hover{text-decoration:underline;}
</style><div class="STlikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FSafetricks&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>Widget by: <a href="http://www.Safetricks.net">Safe Tricks</a></span>
</div>
</div>

• After Pasting above code Replace SafeTricks with your Facebook username

• Then click on the save button and Refresh Your Blog

Follow Below Part If Your Blog Do not Having  JQuery Plugin or if already Installed then leave this part

2nd Part of this Widget

• Go to Blogger >> Template

• Click on The Edit HTML

• Now search for </head>

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

• Then Paste Below Script just above the </head> section.

• After Pasting save your Template.

• Now Refresh Your Blog and I hope Your Facebook box will be works.

 If you face any kind of problem then must leave your problem in below comments.