Floating Facebook Like Box για τον Blogger.

Στη ανάρτηση αυτή θα δούμε πως μπορούμε να προσθέσουμε στο ιστολόγιο μας ένα facebook like box.
Τα Πλεονεκτήματα του αρκετά δελεαστικά.

1.) Eξοικονομείτε πολύτιμο χώρο στο sidebar σας
2.) Tο likebox βρίσκεται πάντα στο οπτικό πεδίο του αναγνώστη έτσι μπορείτε να αυξήσετε τα likes του facebook fan page σας.

Η τοποθέτηση του είναι απλή:

Αφού κάνετε σύνδεση στον blogger, θα πάτε στον Πίνακα ελέγχου σας --> Διάταξη --> Προσθήκη gadget και θα κοιτάξετε να βρείτε το HTML/JavaScript.

Κάντε αντιγραφή τον παρακάτω κώδικα και επικολλήστε τον μέσα στο HTML/JavaScript.

<!--Floating-Facebook-Like-Box-STARTS-Widget-by-http://loneeagle110.blogspot.com-->
<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() {$(".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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_6sXs5Q3fukgVpFD3jxO0j_Q5T-dBmiHfdmBEbdF09erb7_dqo2ZUgaytod5sJCe7yE8P5kOaFewLqCIeITtjFHW2KsRURrMVrGkMQQ7G9vr_UqZTtuGfp6l79EbW1CYrosvdrgoOXQ/s1600/floatingfble.png") no-repeat scroll left center transparent !important;
display:block;
float:right;
height:220px;
padding:0 5px 0 40px;
width:245px;
z-index:99999;
position:fixed;
right:-250px;
top:10%;}
.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%2Fpages%2Σταλες-στο-Γαλαζιο-112539732132843&
width=251&height=220&colorscheme=light&show_faces=true&
border_color=%23fffff&stream=false&header=false&" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:251px;height:210px;background:#fff;" allowtransparency="true">
</iframe><span><a href="https://goo.gl/oZxYwB" target="_blank">Get this</a></span>
</div></div>
<!--Floating-Facebook-Like-Box-STOPS-Widget-by-http://loneeagle110.blogspot.com-->

Αυτό ήταν!!!

Ο παραπάνω κώδικας μόλις σας πρόσθεσε ένα floating like box του Στάλες στο γαλάζιο.
Για να προσθέσετε το δικό σας, ανοίξτε σε ένα νέο tab το facebook fan page σας:

H διεύθυνση του fan page σας φαίνεται στο address bar του browser σας και είναι της μορφής:
http://www.facebook.com/pages/όνομα_του_fan_page_σας/ID_του_fan_page

Αντικαταστήστε το www.facebook.com%2Fpages%2Σταλες-στο-Γαλαζιο-112539732132843 με το όνομα_του_fan_page_σας και το id του Στάλες στο γαλάζιο, με το ID_του_fan_page_σας.

To URL του κώδικα σας θα πρέπει να είναι της μορφής:
href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fόνομα_fan_page_σας%2Fid_fan_page

Αυτό ήταν!

ΠΡΟΣΟΧΗ ! ! !
Αν έχετε ήδη το script 1.6.1/jquery.min.js μπορείτε να μην αντιγράψετε τις πρώτες 2 γραμμές έτσι ώστε να μην φορτώνετε δυο φορές το jquery.
Στο σημείο top:10%, ρυθμίζεται επί της % το που ακριβώς θα εμφανίζεται η εικόνα του facebook που θα παίζει το ρόλο του κουμπιού αφής.
Δηλαδή, μόλις περνάει ο κέρσορας θα ανοίγει το gadget.

Δείτε το στην πράξη

Καλή Επιτυχία ! ! !