31 January 2013
How to add a Floating Facebook Like box in Blogger?
Here is a a floating Facebook like box for blogger
blogs which is very easy to use and can be useful for those who want to
make their blog more attractive by adding different social media
widgets to different parts of their blogs. This widget is very unique
one and can be found on many websites and blogs on the web. It only
appears when someone will hovers it. Otherwise, it will be shrinking it
right side of your blog's body. You can change it's position to left
side as well. But keeping it on right side is better for human eyes.
This widget has already been shared by many bloggers, but we're just
re-sharing it with you for expanding it to more users. This widget is
built within JavaScript, CSS, HTML and
JQuery. It can be more useful for you if you've a decent amount of
Facebook likes for your blog i.e more than 1000. Now let's start adding
it to blogger.
How to Add Floating Facebook Like box to blog?
Follow simple steps below and add this widget.
- Go to Blogger >> Layout >> Add a Gadget >> Select HTML/JavaScript Gadget
- Add an HTML/JavaScript Widget and paste below inside that
<script type="text/javascript">aSve the widget and now the initial part has done.
//<!--
$(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/AVvXsEholXIMe6d4jzXB3_4zo0tzQ5BeZGFOdX5bc-DV_ByoNdjVzRwho1Fa7yW33xlUlo321TTxeDDhNKk4oNoQg937oVPK3GsOsA61pAAzrkXC1-INqJ-uxDzWpnLrkMf5uksSQcdSYR__Reax/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%2FItsimtiazforum&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></div></div>
After adding above code now find this tag </head> in your Template >> HTML >> Proceed and right before it paste below code:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>Save the template and everything is done. View your blog and you'll find a new facebook like box shrinking it right side or your blog.
0 comments:
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
Regards,
Imtiaz Ahmed