Friday, November 21, 2014

How Add Pin It Hover Buttons

Friday, November 21, 2014
πως προσθετω κουμπι how add pin it hover button

Καλησπέρα....η σημερινή ανάρτηση είναι για τους λάτρεις του pinterest και όχι μόνο. Τα κουμπάκια pin it γνωστά και ως pin it hover buttons είναι ένα πολύ χρηστικό εργαλείο καθώς επιτρέπει στους αναγνώστες μας να κάνουν pin απευθείας την φωτογραφία μας. Αν είναι και χαριτωμένα τόσο το καλύτερο. Τώρα αν αναρωτιέστε πως βάζουμε τα κουμπάκια σε κάθε φωτογραφία και αν είναι δύσκολο δεν χρειάζετε τίποτα άλλο από το να ακολουθήσετε τα βήματα παρακάτω.

Για καλό και για κακό μήπως κάνουμε κάποιο λάθος κάνουμε ένα back up. Πηγαίνουμε στη σχεδίαση του blog μας και επιλέγουμε την καρτέλα Πρότυπο. Επάνω δεξιά βλέπουμε ένα κουμπί Δημίουργια αντίγραφου ασφαλείας / Επαναφορά. Το πατάμε και επιλέγουμε λήψη προτύπου.

πως προσθετω κουμπι how add pin it hover button

 Επιλέγουμε επεξεργασία HTML.

πως προσθετω κουμπι how add pin it hover button

Αφού εμφανιστεί το πρότυπο σε μορφή html καλό θα είναι να ανοίξουμε και τα βελάκια που υπάρχουν σε διάφορα σημεία του κώδικα.

πως προσθετω κουμπι how add pin it hover button

Πληκτολογούμε τον συνδιασμό πλήκτρων Ctrl+F για να ανοίξει η Εύρεση.

πως προσθετω κουμπι how add pin it hover button

Γράψτε </body> μέσα στο κουτάκι της εύρεσης η κάντε το αντιγραφή από εδώ και ψάξτε να το βρείτε στο πρότυπο. Συνήθως είναι χαμηλά στον κώδικα.

πως προσθετω κουμπι how add pin it hover button

Μόλις βρούμε το </body> ακριβώς από επάνω του κάνουμε επικόλληση τον παρακάτω κώδικα.


Αφού κάνουμε επικόλληση τον κώδικα επιλέγουμε προεπισκόπηση προτύπου για να δούμε αν δουλεύει και μετά κάνουμε αποθήκευση προτύπου.

Τώρα έχουμε το κλασσικό κουμπάκι Pin it να εμφανίζετε στο κέντρο της εικόνας. Αν θέλουμε να αλλάξουμε το σημείο που εμφανίζετε πηγαίνουμε στον κώδικα που κάναμε επικόλληση πρίν και βρίσκουμε την γραμμή var bs_pinButtonPos = "center"; όπου αλλάζουμε το center σε:   
  • topleft (για να εμφανίζετε επάνω αριστερά)
  • topright (για να εμφανίζετε επάνω δεξιά)
  • bottomleft (για να εμφανίζετε κάτω αριστερά)
  • bottomright (για να εμφανίζετε κάτω δεξιά)
Αν θέλουμε να χρησιμοποίησουμε κάποιο άλλο κουμπί απλά πηγαίνουμε στον κώδικα που κάναμε επικόλληση πρίν και βρίσκουμε την γραμμή
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png"; 
όπου αλλάζουμε το url με του κουμπιού μας.

Αν θέλετε μπορείτε να χρησιμοποιήσετε  και το κουμπί που σας δίνω παρακάτω.
πως προσθετω κουμπι how add pin it hover button
                                             

Κάνουμε  αποθήκευση προτύπου και τελειώσαμε.
Καλή επιτυχία!!!

Περισότερα κουμπιά εδώ.

1 comment:

  1. Καλησπέρα!
    χαιρομαι πολυ που βρήκα το μπλογκ σου! πολύ του γούστου μου τόσο από αναρτήσεις όσο και απο στήσιμο! μιας και κάνεις και τέτοιες αναρτήσεις για τα μπλογκς (κάνω και εγώ ανάλογες) θα ήθελα να σε ρωτήσω πως έβαλες το gadget με τα popular posts με φωτογραφίες! πολύ μου αρέσει και αν και έχω ψάξει πολυ δεν βρίσκω κάτι τέτοιο.

    ReplyDelete