Το Floating Facebook Like Box [2]

Σε αυτή την ανάρτηση θα ασχοληθούμε με το Floating Facebook Like Box [2]. Προκύπτει για το γνωστό σε όλους μας facebook like box με την μόνη διαφορά ότι θα είναι κριμένο και θα εμφανίζετε μόνο όταν οι αναγνώστες σας τοποθετούν τον δείκτη του ποντικιού πάνω του.

Το Floating Facebook Like Box [2] :

     1. Εξοικονομεί χώρο έτσι ώστε να μην μην υπάρχουν πολλά widget στο sidebar του blog σας.
     2. Βρίσκεται πάντα στο οπτικό πεδίο των αναγνωστών σας, αυξάνοντας έτσι τα like της fan page σας στο facebook.






                             


                                                                                                         (αναδημοσιευση: mybloggertricks.gr)

Πάμε όμως να δούμε πώς θα το βάλετε

1.. Σύνδεση στον Blogger 
2.. Πρότυπο  
3.. Δημιουργία αντίγραφου ασφαλείας / Λήψη πλήρους προτύπου
4.. Επεξεργασία HTML 
5.. Συνέχεια 
6.. Πατάμε ctrl + f για να ανοίξει το παραθυράκι αναζήτησης και εκεί ψάχνουμε να βρούμε το παρακάτω κώδικα:  

</head>

7.. Αφού το βρούμε ακριβώς από πάνω του κάνουμε επικόλληση τον παρακάτω κώδικα:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>jQuery(document).ready(function(){jQuery(&quot;#facebook_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -304}, 500); });jQuery(&quot;#twitter_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#twitter_right&quot;).stop(true,false).animate({right: -304}, 500); });jQuery(&quot;#google_plus_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#google_plus_right&quot;).stop(true,false).animate({right: -203}, 500); });jQuery(&quot;#feedburner_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#feedburner_right&quot;).stop(true,false).animate({right: -303}, 500); }); });</script>

8.. Κάνουμε προεπισκόπηση, και αν δεν μας βγάλει κάποιο λάθος κάνουμε αποθήκευση.

9.. Διάταξη
10.. Προσθήκη gadget
11.. HTML/JavaScript

Και μέσα στο gadget βάζουμε τον παρακάτω κώδικα:   

<style>#facebook_link {float:right; padding-right:5px;margin-top:-58px;}#on {visibility:visible;}#off {visibility:hidden;}#facebook_div {width:300px; height:330px; }#facebook_right {z-index: 10005;border:2px solid #3b5998;background-color: #fff;width:300px;height: 330px;position: fixed;right: -304px;}#facebook_right img {position: absolute;top: -2px;left: -40px;}#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-62px;top:-3px;}</style><div id="on"><div id="facebook_right" style="top: 15%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy1nqFlRln3eFTnrsHKBfa9AKtsR5ivT_X7zURWxeAo-QfvXDk-pnpZAaCFNGR2ssFBSxpvDCpLcQKO68x1_xL1o_mLFu2G8lPNQHbe9kMl4oICYCEEpu1b1qMNCeUHjOmS8Q-P2qVuk0/s200/fb2-right.png" alt="boton facebook flotante" />


<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FCorfusat-Zervos%2F329997089428&amp;width=300&amp;height=450&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:450px;" allowtransparency="true"></iframe>
</div></div></div>

12.. Πηγαίνετε στη διεύθυνση facebook και συμπληρώστε τα στοιχεία σας :

Facebook Page Url : Συμπληρώστε το url της fan page σας σελίδας στο facebook
Width : 300
Height: 335
Color Scheme : light
Show Faces :
Border Color :
Stream : 
Header : 

13.. Πατήστε Get Code

14.. Στο παράθυρο που θα σας ανοίξει πατήστε IFRAME και αντιγράψετε τον κώδικα

15.. Επικολλήστε τον κώδικα που αντιγράψατε στη θέση του κώδικα που έχουμε με κόκκινο χρώμα.

16.. Κάντε αποθήκευση