Floating Facebook Like Box for Blogger [2]

Καλησπέρα σε όλους τους φίλους του Blogger Tricks !

Σήμερα θα σας παρουσιάσω την δεύτερη έκδοση [2] του Floating Facebook Like Box !

Έχει γίνει ήδη η ανάρτηση του Floating Facebook Like Box [1] την οποία μπορείτε να βρείτε εδώ:

http://www.bloggertricks.gr/2011/11/floating-facebook-like-box-for-blogger.html

Αναφέρομαι στο κανονικό Facebook Like Box αλλά σε πλάγιο μεγάλο κουμπί.

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

• Εξοικονομείτε αρκετό χώρο για την sidebar σας που είναι σημαντική για κάθε blog.
• Κερδίζετε Likes κάνοντας το Facebook Like Box πιο φανερό στους επισκέπτες σας.
  

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

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) Στην συνέχεια, πατάμε Διάταξη > Προσθήκη Gadget > HTML/JavaScript

<style>#facebook_link {float:right; padding-right:5px;margin-top:-58px;}#on {visibility:visible;}#off {visibility:hidden;}#facebook_div {width:300px; height:335px; }#facebook_right {z-index: 10005;border:2px solid #3b5998;background-color: #fff;width:300px;height: 335px;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/AVvXsEg1Loty2c4boels6PkRNaoegGoU-a8Q-HoJ2NhAopjXIb0uBFhu_f0Zd11nb6KkHhSA5I4pckV-siIIoRs7twSE6Ew9mdhVnDWmqOfBOuITBkExl9TTM_oUKBDR9-cb6_TEIO0YhFrTwZc/s200/fb2-right.png" alt="boton facebook flotante" />
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricksgr&amp;width=300&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:590px;" allowTransparency="true"></iframe>
<div id="facebook_link"><span style="font-size: x-small;"><a href="http://bloggertricks.gr" target="_blank">Blogger</a></span></div></div></div></div>

Τώρα θα πρέπει να αλλάξετε το iframe που είναι με κόκκινα γράμματα με το δικό σας

Για να δημιουργήσετε ένα τέτοιο iframe θα πρέπει να πατήσετε ΕΔΩ

Το iframe σας θα πρέπει να έχει τα εξής χαρακτηριστικά:

• Το URL της σελίδας σας στο Facebook ( πχ: http://www.facebook.com/bloggertricksgr)
• Width : 300
• Height: 335
• Color Scheme : Light
  
• Show Faces :
• Border Color :
• Stream : 
• Header : 

Και στην συνέχεια πατάμε στο κουμπί  Get Code

10) Κάνουμε αντικατάσταση τα κόκκινα γράμματα με το καινούργιο iframe που πήραμε

11) Αποθήκευση και τέλος