War Thunder

Floating vertical share buttons για την ιστοσελίδα σας

Στην ανάρτηση αυτή θα δούμε πως μπορούμε να προσθέσουμε κατακόρυφα κουμπιά κοινωνικής δικτύωσης (vertical share bar) στα αριστερά (ή δεξιά) κάθε ανάρτησης του μπλογκ μας και ακολουθεί (scrollable) τον αναγνώστη καθώς διαβάζει την ανάρτηση όπως φαίνεται παρακάτω:

Σημ: Αν θέλετε να προσθέσετε οριζόντια μπάρα διαβάστε τις παρακάτω αναρτήσεις:

Πως να προσθέσετε μπάρα κοινωνικής δικτύωσης στη νέα πλατφόρμα του blogger

addThis: Πως να προσθέσετε addthis toolbar στη ιστοσελίδα σας

Πλεονεκτήματα

  1. Εξοικονομείτε πολύτιμο χώρο στο sidebar σας
  2. Το share bar βρίσκεται πάντα στο οπτικό πεδίο του αναγνώστη έτσι “υπενθυμίζετε” στον αναγνώστη να διαμοιράσει το άρθρο που μόλις διάβασε.

 
Addthis share bar

Η μπάρα που θα χρησιμοποιήσουμε είναι η κατακόρυφη μπάρα κοινωνικής δικτύωσης του Addthis (Addthis vertical sharing bar) .

Βήμα 1: Ακολουθώντας τον σύνδεσμο αυτό, μεταβαίνουμε στην ιστοσελίδα του Addthis και πατάμε το κουμπί “Get Code for your site!“.

Βήμα 2: Η σελίδα που μεταβαίνουμε είναι η σελίδα επεξεργασίας της μπάρας του addthis. Από τις κατακόρυφες μπάρες επιλέγουμε την μπάρα που μας αρέσει όπως φαίνεται στην παρακάτω εικόνα. Υπάρχει η δυνατότητα αν θέλουμε να μετακινήσουμε την μπάρα στα δεξιά (αλλάζουμε το left με right)  μέσω του κώδικα που εμφανίζεται.

Σημ: Στις επιλογές που μας παρουσιάζονται μην αλλάξετε την επιλογή “A Website” ασχέτως αν η ιστοσελίδα σας βρίσκεται στον blogger ή σε WordPress. Ο λόγος που δεν αλλάζουμε την επιλογή αυτή σε blogger είναι γιατί δεν υπάρχει ακόμη η επιλογή αυτόματης προσθήκης κατακόρυφης μπάρας και σε WordPress θα μας ζητήσει να προσθέσουμε plugin για την επιλογή αυτή και είναι εντελώς περιττό να ακολουθήσουμε την διαδρομή αυτή.

Σημ: Αν εμφανιστεί κουτάκι στην οθόνη σας που σας ζητεί να γραφτείτε για να λαμβάνεται δωρεάν στατιστικά για την μπάρα σας, απλά επιλέξτε “dont want analytics“.

Βήμα 3: Πατήστε το κουμπί “Grab It” για να αντιγραφεί ο κώδικας. Ακολούθως συνδεόμαστε στην πλατφόρμα που έχουμε λογαριασμό (blogger, wordpress, joomla κ.α).

Για Blogger

Βήμα 4.a: Επιλέγουμε από το αριστερό μενού του blogger την επιλογή Πρότυπο και στην συνέχεια πατάμε στο κουμπί Επεξεργασία HTML που βρίσκεται πάνω δεξιά.

Σημ: Πάντα παίρνουμε ένα αντίγραφο ασφαλείας του template μας πριν κάνουμε κάποια αλλαγή σε αυτό. Για το πως δημιουργούμε αντίγραφο ασφαλείας του template μας, ακολουθείστε τον σύνδεσμο αυτό.

Βήμα 4.b: Με Ctrl+F ανοίγει η μπάρα αναζήτησης του browser μας και δίνουμε το ακόλουθο:

</body>

Ακριβώς από πάνω από το σημείο αυτό κάνουμε paste τον κώδικα που αντιγράψαμε από την σελίδα του addthis όπως φαίνεται παρακάτω:

Αποθηκεύουμε το πρότυπο μας και είμαστε έτοιμοι!

Για WordPress

Βήμα 4.a: Επιλέγουμε από το μενού στα αριστερά Appearance -> Editor.

Σημ: Πάντα παίρνουμε ένα αντίγραφο ασφαλείας των αρχείων μας πριν κάνουμε κάποιες αλλαγές σε αυτά. Για παν ενδεχόμενο καλύτερα να κατεβάσουμε τα αρχεία μας τοπικά μέσω ftp έτσι ώστε να έχουμε τοπικά στον υπολογιστή μας ένα αντίγραφο ασφαλείας.

Βήμα 4.b: Ανοίγουμε το αρχείο footer.php. Με Ctrl+F ανοίγει η μπάρα αναζήτησης του browser μας και δίνουμε το ακόλουθο:

</body>

Ακριβώς από πάνω από το σημείο αυτό κάνουμε paste τον κώδικα που αντιγράψαμε από την σελίδα του addthis όπως φαίνεται παρακάτω:

Πατάμε update file και είμαστε έτοιμοι!

loading...

Share This Post

Related Articles

Leave a Reply

Άδεια Creative Commons
Χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Παρόμοια Διανομή 4.0 Διεθνές .
© 2017 Greek PC Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS