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 > Dashboard >
- 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/AVvXsEgI0llqS8futCZGI6PIyJBYXcDBj1kGsqaxk2Hde28clwEwKhZtAmCA7mL9Pfuh4zkm1Y-05XyJlmfowkKi9InKHpDdQ73poVGVGSqYohVh2vALmRJhzjuV1gC9V3rr7NSSaICKoER2zJmP/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%2Fbloggertricks&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>
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 bloggertricks 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!
Floating Facebook LikeBox For Blogs
Reviewed by Queency
on
23:55:00
Rating:
Reviewed by Queency
on
23:55:00
Rating:
