How To Add Professional Floating Facebook Likebox In Blogger


How To Add Professional Floating Facebook Likebox In Blogger - PAKLeet


Hello Friends, How Are You All, I Hope You'll Fine..........
Facebook Likebox Widget is a very important widget for every blog. We know that Facebook is biggest social networking platform and best place for sharing our latest blog posts. Facebook is too much helpful to build any kind of blog from faster pace. So it is necessary to use Facebook like box on the blog which let your visitors to become your regular reader and get notified about your posts from their facebook timeline. I already post about the floating social widget for blogger posts, you may also take a look at it. But today i am about to post about the floating Facebook likebox widget, which is very attractive and professional looking too and did not occupy a bit space on your blog. So lets start the tutorial.


How to Add Floating Likebox?

  • Go To Blogger Dashboard >> Then Layout
  • Click on Add a Gadget on sidebar and then HTML/Javascript.
  • 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/AVvXsEjpiEg0M4OIQa5oS8y_YORiaS2kcjgFUhAncw6hDzWiIcAPkyQrJfTuZgNrEr2u8nl9T9FxK7hnI8s9FEdqYXzd_RIoKKBHDrSsjMmmrGGKabT-QsT-uikPZU0WjxeXaZF6EdCdnvE78NxO/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%2Fmhahnh786&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.PAKLeet.Blogspot.com">PAKLeet- Blogger Underground</a></span>
</div>
</div>






  • After Pasting above code Replace mhahnh786 with your Facebook username
  • Then click on the save button and Refresh Your Blog.

Final Words:


So this is a great widget to convert your blog visitors into readers by using a simple widget. Now It's your turn to share this post with your friends and write your views in comments till then Happy Liking.