How to add a Two New Floating Facebook Like box in Blogger?

15 February 2013

How to add a Two New Floating Facebook Like box in Blogger?

Namecheap.com - Cheap domain name registration, renewal and transfers - from only $3.98/Year

Two New 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 pageviwes 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:

How to add a Floating Facebook Like box in Blogger?

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcsz8y8ECmUqfDqPjAwQNaC3MW8mZBVvTbsDcO-_8tR-xgMbF7qKf-fwoLiAfBFnBVEJ-bNCzdHmuZvc2pbE-g6z_ikLP15XluREEVaznxs_kNqi2OjeKwutbZgIAIw85toms70aKSOTw/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%2F
itsimtiazforum&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span><a href="http://itsimtiazforum.blogspot.com" target="_blank">Get This!</a></span></div></div>

Style 2:

Code 2:

<script type="text/javascript">
//
</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%2F
Itsimtiazforum&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://itsimtiazforum.blogspot.com" target="_blank">Get This!</a></span></div></div>

Note:

Replace Itsimtiazforum 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.

Please Share it! :)

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

15 February 2013