Here are 2 Simple Steps
Step 1: Adding Jquery JavaScript Plugin
Step 1: Adding Jquery JavaScript Plugin
- a. Go to Blogger Dashboard > Design tab > Edit Html
- Search for </head> tag
- Add below line of code Before </head> tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
Step 2: Adding Widget Code
a. Copy below code
- Replace Fbtsnts with your Facebook Username Don't forgot Add F before your username without any space.
- again copy the code.
- Go to Blogger Dashboard > Design tab > Page Elements
- 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);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgg6zQli25nLEEE64D_M2ifAsWD1nRiw_WEjunByG1JwTvLpiJwQK8n4eLxZk2Ee4fmT4Givt_AuZnkIZLDCRk_GY2HvU7d6UJtEzxATDMu3ZYWwsz1A6wR2phOElpEdpOmVTNoiVfkAFO/s150/w2b_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%;}
.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%2Fbtsnts&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>By <a href="http://btsnts.blogspot.com/">BtsNts</a> / <a href=" http://btsnts.blogspot.com/2011/12/add-floating-facebook-like-box-for.html "> 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
https://www.facebook.com/profile.php?id=100000023460367
ReplyDeletemy 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..
there is one correction with this post, you also have to replace btsnts.blogspot.com with your blog URL.
Deleteperfect!
ReplyDeleteyeh exactly its cool
DeleteNice Rahul.. I was searching for this Plugin. I have intalled on my Blogger Blog.
ReplyDeleteHow To Words