How Add Pin It Hover Buttons

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

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

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

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

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

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

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

<script> //<![CDATA[ var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikS5p4ku1BBdaY8sIv6qe0nRfJkM8iRDHgMANNRinW_bFQR7jo4c4sk3bb3MwZAcXcKtzEU5JWqoDp4dTXyFML1BW3E2Hk6kPuC7-XHcQpcpkNWjh8eSkfUFHB20HucR3iSypoDPJjA9cq/s1600/pinterestx1_72.png"; var bs_pinButtonPos = "center"; var bs_pinPrefix = ""; var bs_pinSuffix = ""; //]]> </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> <script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'> // This Pinterest Hover Button is brought to you by ryleeblakeblogspot.com. // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details. // Feel free to use and share, but please keep this notice intact. </script> <br>

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

Τώρα έχουμε το κλασσικό κουμπάκι Pin it να εμφανίζετε στο κέντρο της εικόνας. Αν θέλουμε να αλλάξουμε το σημείο που εμφανίζετε πηγαίνουμε στον κώδικα που κάναμε επικόλληση πρίν και βρίσκουμε την γραμμή var bs_pinButtonPos = "center"; όπου αλλάζουμε το center σε:   

• topleft (για να εμφανίζετε επάνω αριστερά)

• topright (για να εμφανίζετε επάνω δεξιά)

• bottomleft (για να εμφανίζετε κάτω αριστερά)

• bottomright (για να εμφανίζετε κάτω δεξιά)

Αν θέλουμε να χρησιμοποίησουμε κάποιο άλλο κουμπί απλά πηγαίνουμε στον κώδικα που κάναμε επικόλληση πρίν και βρίσκουμε την γραμμή
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikS5p4ku1BBdaY8sIv6qe0nRfJkM8iRDHgMANNRinW_bFQR7jo4c4sk3bb3MwZAcXcKtzEU5JWqoDp4dTXyFML1BW3E2Hk6kPuC7-XHcQpcpkNWjh8eSkfUFHB20HucR3iSypoDPJjA9cq/s1600/pinterestx1_72.png"; 
όπου αλλάζουμε το url με του κουμπιού μας.

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

                                              http://i857.photobucket.com/albums/ab136/dallaeleni/Pin%20it%20buttons/Heartpinitbutton_zpsc424cda6.png

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

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