In this tutorial i will show you how to add a cool Floating Facebook like widget for Blogger that slides to the left on mouseover. Demo: You can see a static facebook badge at the right side of this blog.In this tutorial you have to perform just two simple steps and you will have your own Floating Facebook like widget on your blogger.
2. Search for </head> before it Paste the following JQuery code
3. Ignore this step if you have already added JQuery Plugin to your blog.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
4. Save Your Template.
Step 1. Adding JQuery Plugin To Your Blogger Blogs
1. Go To your Dashboard > Design > Edit HTML2. Search for </head> before it Paste the following JQuery code
3. Ignore this step if you have already added JQuery Plugin to your blog.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
4. Save Your Template.
Step 2. Add Floating Likebox To Your Blogger Blogspot
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/AVvXsEh3qj7WF2hrgKeoh8SHwnOL2zw1q-748b80pGEjx5lS9_k2l39LuAyfYW8CV35J7b7_zJ8m9n39W6Y8rqA0Bz7-iBWb1ROfCCHOLyl1ED6ID0wKgneN1jLNTT7Y5LFxRzwEVHll7w8iZPkS/s1600/facebook1.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: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #FF9D00;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://www.facebook.com/CrackModo&
width=245&colorscheme=light&show_faces=true& connections=8&stream=false&header=false&height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.gurusmaker.blogspot.com">Huge Tymers Community</a></span></div></div>
Now the last thing is, replace CrackModo with your Facebook Page's Username.
5. Save Your Template.
Don't forget to like us on Facebook.
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/AVvXsEh3qj7WF2hrgKeoh8SHwnOL2zw1q-748b80pGEjx5lS9_k2l39LuAyfYW8CV35J7b7_zJ8m9n39W6Y8rqA0Bz7-iBWb1ROfCCHOLyl1ED6ID0wKgneN1jLNTT7Y5LFxRzwEVHll7w8iZPkS/s1600/facebook1.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: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #FF9D00;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://www.facebook.com/CrackModo&
width=245&colorscheme=light&show_faces=true& connections=8&stream=false&header=false&height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.gurusmaker.blogspot.com">Huge Tymers Community</a></span></div></div>
Now the last thing is, replace CrackModo with your Facebook Page's Username.
5. Save Your Template.
Don't forget to like us on Facebook.
For more information stay connected and please comment us.
.gif)
0 comments:
Post a Comment