How to add floating Facebook like box widget for Blogger






Having a Floating Facebook Like Box can help get more Facebook likes and make it easier for you to communicate to your fans and get some attention. 


Social media are needed a lot right now so here is how to do it really fast. 


Let me just say its a widget so you won't have to make any change in the template.


floating facebook like box


So let us start.


1. Login to Blogger account and go to Layout. 


2. Click on add gadget.

floating facebook like box


3. Choose to add HTML/JavaScrit

floating facebook like box

4. Copy the following code 

floating facebook like box
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:10%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style="">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/wizardofdork&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true">
</iframe></div></div>

5. Simply replace the marked page with yours.




And that is all. You have successfully installed your own floating Facebook Like Box for Blogger!

Find out more Blogger tips and SEO tools here:

How To Remove Blogger Navbar

How to remove powered by blogger

How to make a signature for your blog posts on blogger

How to remove: Subscribe Post to Atom for Blogger

How to create an about us page on Blogger

post signature

No comments:

Post a Comment

Back To Top