Floating Facebook Like Box for Blogger

Καλησπέρα σας, απο το Blogger Tricks

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

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

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

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

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

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

<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() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggertricksgr&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=12&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.bloggertricks.gr">Blogger Tips</a></span></div></div>

Ο παραπάνω κώδικας είναι για την σελίδα του Blogger Tricks:

http://www.facebook.com/bloggertricksgr

Κάνε το ανάλογο για την σελίδα σου..

Αν δεν καταλάβεις κάτι απο τα παραπάνω, γράψε μου στα σχόλια !