Μη Συνδεδεμενος Παρακαλώ συνδεθείτε ή εγγραφείτε

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω  Μήνυμα [Σελίδα 1 από 1]

#1
 Admin

avatar
Admin
[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]






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

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

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


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

1) Σύνδεση στον [Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]
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>
Cool Ελέγχουμε αν δουλεύει πατώντας προεπισκόπηση και πατάμε αποθήκευση.

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="http://2.bp.blogspot.com/-MfikPju8cfM/UDaQ9xnOhiI/AAAAAAAAAZw/b7TyuHT1Vqw/s200/fb2-right.png" alt="boton facebook flotante" />
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ffoulscode&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://foulscode.blogspot.gr/2013/01/floating-facebook-like-box-for-blogger-2.html" target="_blank">Blogger</a></span></div></div></div></div>

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

Για να δημιουργήσετε ένα τέτοιο iframe θα πρέπει να πατήσετε [Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]

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

  • Το URL της σελίδας σας στο Facebook ( πχ: [Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.] )
  • Width : 300
  • Height: 335
  • Color Scheme : Light
  • Show Faces :
  • Border Color :
  • Stream : 
  • Header : 

Και στην συνέχεια πατάμε στο κουμπί  [Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]

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

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

[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]

http://www.greekport.gr

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή  Μήνυμα [Σελίδα 1 από 1]


Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης

Τρόποι Κοινοποίησης:
URL:
BBCode:
HTML: