Port.forumgreek.com
Θέλετε να αντιδράσετε στο μήνυμα; Φτιάξτε έναν λογαριασμό και συνδεθείτε για να συνεχίσετε.

Floating Facebook Like Box for Blogger [2]

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Port Admin
Port Admin
Admin
Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017
https://port.forumgreek.com

ΔημοσίευσηPort Admin Κυρ Απρ 16, 2017 5:02 pm

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






Αναφέρομαι στο κανονικό 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) Αποθήκευση και τέλος

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

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή

Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε

Προκειμένου να απαντήσετε πρέπει να είστε μέλος.

Δημιουργία Λογαριασμού

Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!


Δημιουργία ενός νέου Λογαριασμού

Σύνδεση

Έχετε ήδη έναν λογαριασμό; Κανένα πρόβλημα, συνδεθείτε εδώ.


Σύνδεση

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