Here are 2 Simple Steps

Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)

  1. a. Go to Blogger Dashboard > Design tab > Edit Html 
  2. Search for </head> tag
  3. Add below line of code Before </head> tag

<script src="" type="text/javascript"></script>

Step 2: Adding Widget Code
a. Copy below code

  1. Replace Fbtsnts with your Facebook Username Don't forgot Add F before your username without any space.
  2. again copy the code.
  3. Go to Blogger Dashboard > Design tab > Page Elements
  4. Add a Gadget > HTML/Javascript

<script type="text/javascript">
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
<style type="text/css">
.w2bslikebox{background: url("") 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=";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="">BtsNts</a> / <a href=" "> Get This!</a></span></div></div>

Don't remove F which I have added before my username

Watch the live demo at Right of this Page  

Post a Comment

    my facebook id i have trouble in adding my page and i have added f before also it is showing that "Could not retrieve id for the specified page. Please verify correct href was passed in." what to do..

    1. there is one correction with this post, you also have to replace with your blog URL.

  2. Nice Rahul.. I was searching for this Plugin. I have intalled on my Blogger Blog.

    How To Words

  3. Hello Admin, thank you for enlightening us with your knowledge sharing. PHP has become an inevitable part of web development, and with proper PHP training Chennai, one can have a strong career in the web development field.

  4. Quite Interesting post!!! Thanks for posting such a useful post. I wish to read your upcoming post to enhance my skill set, keep blogging.
    PHP Training in Chennai


If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM