Floating Facebook Like Box for Blogger

Floating Facebook Like Box for Blogger

Σήμερα θα σας παρουσιάσω ένα πολύ όμορφο αλλά και πρακτικό Blogger Widget.
Αναφέρομαι στο Facebook Like Box αλλά σε "πλάγιο κουμπί" όπως στην παραπάνω εικόνα.

Είναι πιστεύω ένα αρκετά χρήσιμο Gadget που πρέπει να έχει κάθε blog, αφού:

• Εξοικονομείτε αρκετό χώρο για το sidebar σας που είναι σημαντικό για κάθε blogger.
• Κερδίζετε Likes κάνοντας το facebook like box πίο φανερό στους επισκέπτες σας.
  

Πάμε όμως να δούμε πως θα το εγκαταστήσετε στο blog σας:

1) Σύνδεση στον Blogger
2) Σχεδίαση
3) Προσθήκη Gadget
4) HTML/JavaScript

Και στο δεύτερο κουτάκι προσθέστε τον παρακάτω κώδικα:

* Αν δεν λειτουργεί στο blog σου, δοκίμασε να βγάλεις τα κίτρινα γράμματα του κώδικα *

<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/AVvXsEj4rQSMVRt3CZxhzWFVZIUjgosM3ves2ApT8FG4ZXJpt0LfcTOB0D5melVx7LP3Bow4V1NZX7Y62uPYL80d7cAPjjeUsXEndwdojrWSSVOyFw3A_XLkgWKeGoV453CtxG6WMgZd-EYZ9GA/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%2Ffoulscode&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://foulscode.blogspot.gr"> FoulsCode</a></span>
     </div>
 </div>

 http://foulscode.blogspot.gr/2012/12/floating-facebook-like-box-for-blogger.html