Stylish Floating Facebook Like Box For Blogger

                     We all know Facebook is a high rated social media. Facebook having millions of visitor and getting billions of hits every day. Facebook page of a blog is one of important part for increasing blog traffic.Facebook likes brings you maximum number of visitors and increasing your pageviews for the new posts. I will give you some stylish floating Facebook Like boxes for your blogger blog.

First add  J-Query code

• Go to blogger Dashboard >>  Template >> Edit html.
• Search for </head> and just above it paste the following JQuery code, (You can ignore this step if Jquery Link is already added in your template).
  
  

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

How to add the html codes?

• Go to your blogger Dashboard >> Layout >> add a gadget >> HTML/JavaScript
• Paste the following codes.

Style 1:

Code 1:

<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FMonstertricks&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span><a href="http://monstertricks.blogspot.com/2013/04/stylish-floating-facebook-like-box-for.html" target="_blank">Get This!</a></span></div></div>
     </div>
</div>

Style 2:

Code 2:

<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/-JWNRbfKNQrk/UEoSI1LN1VI/AAAAAAAAMic/gnuREx219iE/s1600/fblikebox.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:20%;}
.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=http%3A%2F%2Fwww.facebook.com%2FMonstertricks&width=240&height=320&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:320px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://monstertricks.blogspot.com/2013/04/stylish-floating-facebook-like-box-for.html" target="_blank">Get This!</a></span></div></div>

Replace Monstertricks  from the above code and paste your own Facebook page username.

• Now Save. Visit  your Blog to see it floating facebook like box at the right side of your webpage.

Need any help?? Comment Please!!!

Socializer Widget By Monster Tricks

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →