I know every blogger and webmaster have added Facebook like box plugin on blogs/websites.But they don’t have make any type of activity. They are simple widgets on your blog. Today I am sharing wonderful tutorial with you inspired from MBT blog. This tutorial will tell you How To Add Sliding Facebook LikeBox To Blogger.
After a long time, I am writing a post on Blogs Daddy. I hope you will enjoy this tutorial.
In the demo you can see an image that float one the left side of the page when you put your mouse pointer on that image the image slide having a Facebook like box with a wonderful style, follow the steps below and see how you can grab this for your blogger blog.
1. Loging to your Blogger Dashboard > Page Elements > Add a Gadget
2. Choose HTML/JavaScript Gadet
3. Copy The Following Code and Paste Inside The Gadet
<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(“http://1.bp.blogspot.com/–tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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>
//<!–
$(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(“http://1.bp.blogspot.com/–tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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%2Fblogsdaddy&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://www.MyBloggerTricks.com”>My Blogger Tricks</a></span></div></div>
Note:- Replace “blogsdaddy” with you page username. In case your facebook Page URL looks like
“http://www.facebook.com/pages/BlogsDaddy/229511653738916″
Then better create a Facebook Username in 5 seconds by visiting this Link
Then better create a Facebook Username in 5 seconds by visiting this Link
4. Save Your Gadget
5. Now Go To Design > Edit HTML
6. Paste The Code Below In Header Section <head>Code In Between</head>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js”></script>
7. Save Your Template & Visit Your Blog It Is Working.
|
|
Note : You will find a confirmation link in your inbox or junk folderIf You Enjoyed This Post Please Take 5 Seconds To Share It.