ANIMATED BANNERS ΓΡΗΓΟΡΑ ΚΑΙ ΕΥΚΟΛΑ

Καλημέρα και καλή εβδομάδα σε όλους. Μετά από τρεις εβδομάδες το Locus Blogus είναι και πάλι μαζί σας με συμβουλές, κόλπα και προτάσεις. Σήμερα θα δούμε πως μπορούμε γρήγορα και εύκολα να κάνουμε animation εικόνες και banners μέσω διαδυκτίου και αυτό χάρη στο gifninja.com.
Η παραπάνω ιστοσελίδα μας επιτρέπει να κάνουμε animation μέχρι και πέντε εικόνες, να μετατρέψουμε ένα video σε animated gif, να κάνουμε resize (να αλλάξουμε το μέγεθος) σε μια εικόνα και να χωρίσουμε ένα animated gif αρχείο. Όλα αυτά γίνονται μέσα σε ένα λεπτό. Εμείς θα ασχοληθούμε για το πως μπορούμε να κάνουμε ένα animated banner για το blog μας. Η υπηρεσία μας δίνει επίσης και κώδικα για την προσθήκη αυτού.
Επιλέγουμε από τη δεξιά στήλη το create an animated gif και μεταφερόμαστε στη σελίδα όπου θα ανεβάσουμε τις εικόνες που θέλουμε (κλικ). Σ' αυτή τη σελίδα έχουμε δύο επιλογές: 1) να ανεβάσουμε μόνοι μας τις εικόνες που θέλουμε να απαρτίζουν το banner μας ή 2) να τις στείλουμε σε ένα zip file λέγοντας με ποια σειρά τις θέλουμε για να το κάνει κάποιος άλλος. Εμείς θα ασχοληθούμε με την πρώτη επιλογή.
Διαλέγουμε τις εικόνες που θέλουμε (μέχρι πέντε) και τις επιλέγουμε με το browse για να εμφανιστούνε στα άσπρα πλαίσια. Όταν τελειώσουμε με αυτό επιλέγουμε την ταχύτητα που θέλουμε να εναλλάσονται οι εικόνες στο banner μας σέρνοντας το κουμπί προς τα αριστερά για πιο αργά και προς τα δεξιά για πιο γρήγορα. Όταν τελειώσουμε και με αυτό πατάμε το κουμπί make my gif! Θα ανοίξει μια σελίδα που θα δείχνει σε προεπισκόπηση το banner και έχει τρεις επιλογές: 1)Yes - It's fantastic (το επιλέγουμε αν το αποτέλεσμα μας αρέσει), 2)No - It 's too slow/fast (το επιλέγουμε αν θέλουμε να αλλάξουμε την ταχύτητα με την οποία εναλλάσονται οι εικόνες) και 3)No - Let me start over (το επιλέγουμε αν δε μας αρέσει και θέλουμε να τα κάνουμε όλα από την αρχή). Αν όλα πάνε καλά ακολουθούμε την πρότη επιλογή και θα ανοίξει μαι σελίδα η οποία μας ρωτάει αν θέλουμε το δημιούργημα μας να αξιολογηθεί ή όχι. Επιλέγουμε αυτό που θέλουμε, βάζουμε ένα τίτλο για το banner μας και κάποιες ετικέτες (tags) και πατάμε save gif. Μέσα σε λίγα δευτερόλεπτα θα έχουμε το banner μας και από κάτω θα εμφανίζεται ο κώδικας για την προσθήκη αυτού σε blogs και web sites και από κάτω ένας άλλος κώδικα που χρησιμεύει για την προσθήκη του banner σε forums.
Αν βάλετε τον κώδικα στο ιστολόγιο σας θα εμφανιστεί το banner αλλά αν πάει κάποιος να κάνει κλικ πάνω του τότε θα μεταφερθεί στο gifninja.com. Εμείς θέλουμε όποιος κάνει κλικ στο banner μας να μεταφέρεται στο διαδυκτιακό μας χώρο όταν κάποιος άλλος εκτός από εμάς το έχει προσθέσει στο ιστολόγιο του. Άρα πρέπει να πειράξουμε λιγάκι τον κώδικα. Πάμε να δούμε πως γίνεται αυτό με ένα παράδειγμα.
Δημιούργησα το παρακάτω banner:

gifninja.com Create custom animated gifs at gifninja.com!
Αν κάνετε κλικ πάνω του θα μεταφερθείτε στο gifninja.com καθώς επίσης εμφανίζεται και ένα μύνημα κάτω από το banner μας. Αυτό σίγουρα δε μας αρέσει.
Πάμε να δούμε πως θα φέρουμε τον κώδικα στα μέτρα μας. Ο κώδικας είναι ο παρακάτω:

<a href="http://www.gifninja.com"><img src="http://www.gifninja.com/Workspace/3350cd36-0d07-4fb5-a1fa-73196c239bf6/output.gif" /></a><center>gifninja.com <a href="http://www.gifninja.com">Create custom animated gifs at gifninja.com!</a></center>

Όπως βλέπετε έχουμε χρωματίσει κάποια μέρη του κώδικα. Το μπλε κομμάτι αντιστοιχεί στο μύνημα που εμφανίζεται κάτω από το banner μας. Το μόνο που πρέπει να κάνουμε είναι να το διαγράψουμε. Το κομμάτι του κώδικα που είναι με κόκκινο χρώματο αντικαθιστούμε με τη διεύθυνση του ιστολογίου μας. Για το banner που έκανα ο κώδικας θα γίνει ως εξής:

<a href="http://hackaday-thema.blogspot.com/p/radio.html"><img src="http://www.gifninja.com/Workspace/3350cd36-0d07-4fb5-a1fa-73196c239bf6/output.gif" /></a>

και το banner θα εμφανίζεται ως εξής:



Αν κάνετε κλικ πάνω στο banner που βγαίνει από τον πειραγμένο κώδικα θα δείτε ότι μεταφερόμαστε στη σελίδα που θέλουμε και όχι στο gifninja.com. Σε περίπτωση που θέλουμε το banner να εμφανίζεται πιο κεντραρισμένο απλά βάζουμε τον κώδικα ανάμεσα στο <center> και </center> δηλαδή:

<center> κώδικας </center>

Αν κάνουμε κάτι τέτοιο τότε το banner μας θα εμφανίζεται όπως παρακάτω:



Ελπίζω να βρείτε αυτή την ανάρτηση χρήσιμη. Αφήστε τη φαντασία σας να καλπάσει και να είστε σίγουροι ότι το αποτέλεσμα θα σας αποζημιώσει. Σας εύχομαι καλές δημιουργίες.