I found a script online that adds a floating Facebook button
to right side of your blogs or websites. The button upon clicking slides
towards left revealing a Facebook Like Box. It is an excellent coded slider that
Hides the Likebox inside a container and reveals it only when visitors hovers
the cursor on the floating button. A wordpress version of the widget will also
be shared today inshAllah. You can use the same code to add it to your websites
or any webpage you may have. So lets add this cool Floating Like Box to your
blogger blogs.
Add Floating Likebox To Blogger
- Go To
Blogger > Design > PageElements
- Click
on "Add a Gadget"
- Choose
HTML/JavaScript Widget
- 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/AVvXsEj9IVIE0HPZ8dfPls9nqUr2RJ3vazbyX3Mz_Ev8d9eCJyUXpA6GvgNv2s0H5gzPkuQJ8Y6KqcIPvbq1zMwZcZMQAkk6l-jv5CLxBsRHy7FXEEt09Aa6-XlUKNK_XoL14yb6csrfX2sMs8DR/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9IVIE0HPZ8dfPls9nqUr2RJ3vazbyX3Mz_Ev8d9eCJyUXpA6GvgNv2s0H5gzPkuQJ8Y6KqcIPvbq1zMwZcZMQAkk6l-jv5CLxBsRHy7FXEEt09Aa6-XlUKNK_XoL14yb6csrfX2sMs8DR/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%2F usefullstuff &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;">
http://www.Facebook.com/usefullstuff
If you have not yet created a Facebook Username to brand
your Fan Page then create it in seconds by clicking this link Once
your create a username then replace usefullstuff with your newly
created username
6. Save your widget
7. Now go To Design > Edit HTML
8. Search for <head> and just below
it paste the following JQuery code, (You can ignore this step if Jquery Link
is already added in your template)
<script
src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'
type='text/javascript'/>
9. Save your template and you are all done!
Visit your Blogs to see it floating at the right side of
your webpage. I hope this widget helps you in increasing the number of your
Facebook Readers. The widget code was created byHarish and
reshared at MBT.
No comments:
Post a Comment