Add official Facebook Likes Box at Sidebar, We can save our blog Space instead of adding rectangle box in sidebar or footer, its look very attractive To your blog. 1.Go to the blogger.com >> Now go To Design > Edit HTML
2. Search for <head> and just below it paste the following J Query code,
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
You can see Below how to add code below <head>
Follow below simple steps to add floating Facebook likes box
1 Go To Blogger > Design > Page Elements
2 Click on "Add a Gadget"
3 Choose HTML/JavaScript Widget
4 Paste the following code inside it,
<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/AVvXsEh2XlnBbsdG4kQvo-1fD03NgwV2kcWP-idLjTzj5qvQVl5NkLlCIa0PCyn9fy-WQwfhTMWhNXYm5MzFRy82FBVbpYZejz7ovdz6RJVi7CpXRJ0IM4D4dPPzLjNQ0cIihu28eFFEZKm-sg4X/s150/w2b_facebookbadge.pn") 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%2FExpertisetechblog&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>Widget by:<a href="http://expertiseblog.net">Sample blog Tricks</a></span></div></div>
Note Replace the Username with your Brand Facebook page name
Click here for live Demo : http://sampleblogtricks.blogspot.com/
If you like my post like my Facebook page http://www.facebook.com/Expertisetechblog
Subscribe to Our Feeds !
Labels:
Blogger Tutorial
Previous Article
Responses
0 Respones to "How To Add Floating Facebook LikesBox For your blog"
Post a Comment