HOW TO ADD FLOATING FACEBOOK LIKE BOX WIDGET FOR BLOGGER

Facebook connect is very important to your blog, let your visitor to like your fans page so they can find your post on their wall by publishing your post on facebook. And you will not miss your visitor.

Back to the topic, today I want to share HOW TO ADD FLOATING FACEBOOK LIKE BOX WIDGET FOR BLOGGER. It's very simple, fast, and elegant, you will find your blog more attractive.

HOW TO ADD:

1. Go to Blogger Dasboard, then click Template

2. Click Edit HTML

3. Find "</head>" you can use ctrl+f

4. Copy this code before "</head>"

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

5. Save your template

6. Go to layout, click "Add a Gadget"

7. Select "html/java script" then add this code

<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/AVvXsEgGvk2Kw-Skpfj0AZaSXcF9Cv_umgtzoTrJ0kTORw_2BMn0oHil3hEe9mA1lQLJaIfTYwV1VMRU2kk55zUlcro5dt05gMHr4p3orqXbTEHZIcvopqLTgHjA2k8zzgIzRf9hM_QajvyswR8/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%2FUnderhax&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>Widget by :<a href="http://www.underhax.com">Underhax</a></span>     </div> </div>

8. Save

Note: Change "Underhax" with your own Fans Page name.

Please leave your comment.

DEMO

Tweet