Δευτέρα 19 Ιανουαρίου 2009

ANIMATED LOGOS ΚΑΙ ΑΛΛΑ

Όλοι όσοι έχουμε blogs θέλουμε κάτι διαφορετικό για να ξεχωρίζει το ιστολόγιο μας. Θέλουμε παραπάνω στήλες, banners, logos, κουμπιά, clip arts. Όλα αυτά είναι εύκολα για αυτούς που ξέρουν να σχεδιάζουν τέτοια πράγματα. Εμείς που δεν ξέρουμε; Υπάρχει λύση (στο internet φυσικά) και είναι δωρεάν.
Απλά πρέπει να επισκεφτείτε το FlamingText . Εκεί πέρα θα βρείτε τα πάντα και σας δίνεται η δυνατότητα να σχεδιάσετε τα πάντα με εύκολο τρόπο έτσι ώστε οι δημιουργίες σας να είναι μοναδικές. Ναι, υπάρχουν και animated logos. Έχει πλούσια γκάμα και μπορείτε να διαλέγετε με τις ώρες. Ακόμα και γραμματοσειρές μπορείτε να βρείτε.
Να επικεντρωθούμε όμως στο πως κάνουμε ένα animated logo, μια και όταν μπαίνει κάποιος στη σελίδα μας το πρώτο πράγμα που βλέπει είναι το logo. Από το site που προανέφερα για να κάνετε logo πρέπει να πάτε στο headings. Κάνοντας κλικ στο link που σας παρέθεσα μεταφέρεστε σ' έναν οδηγό πέντε βημάτων (δυστυχώς το site δεν προσφέρεται στην ελληνική γλώσσα). Στα δεξιά θα δείτε τις επιλογές που έχετε. Διαλέξτε ότι σας αρέσει και μετά γράψτε το κείμενο, διαλέξτε το στυλ, το χρώμα, το μέγεθος του logo και τη γραμματοσειρά που θέλετε να έχει το logo σας. Αν θέλετε animated κάντε κλικ στο animated. Μετά πατήστε το create logo. Παίρνει περίπου δεκαπέντε δευτερόλεπτα για να δημιουργηθεί το logo σας. Μόλις δημιουργηθεί κάνετε δεξί κλικ και αποθήκευση ως (save as).
Τώρα θα χρειαστεί να πειράξουμε λίγο τον κώδικα γιατί αν βάλουμε με τη γνωστή διαδικασία το logo στο blog η εικόνα δε θα είναι animated αλλά στατική. Πρέπει να σηκώσουμε στο internet το logo που δημιουργήσαμε. Το ImageShack και το PhotoBucket παρέχoυν τέτοιου είδους δυνατότητα (δωρεάν φυσικά). Το μόνο που χρειάζεται είναι να κάνετε εγγραφή (registration). Μόλις σηκώσετε το logo σας βεβαιωθείτε για τη διεύθυνση που βρίσκεται.
Τώρα πρέπει να πάμε: Πανόπτης, διάταξη και επεξεργασία HTML. Πρώτα κάνουμε ένα back up τον κώδικα μας για να είμαστε ασφαλείς. Μετά κάνουμε κλικ στο κουτάκι που υπάρχει δίπλα στην επέκταση προτύπων γραφικών στοιχείων (expand widget templates) έτσι ώστε να εμφανιστεί ένα tick. Ψάχνουμε το κομμάτι του κώδικα που φαίνεται στο παρακάτω screenshot:
Ακριβώς από κάτω του βλέπουμε το κομμάτι του κώδικα που απεικονίζεται στο παρακάτω screenshot:
Στο κομμάτι του παραπάνω κώδικα εκεί που λέει maxwidgets='1' αλλάξτε την τιμή (1) σε οποιοδήποτε μεγαλύτερο αριθμό (από το 1) και εκεί που λέει showaddelement='no' αντικαταστείστε το no με το yes. Μόλις κάνετε τις παραπάνω διεργασίες πατήστε αποθήκευση (save).
Αν πάτε τώρα Πανόπτης, διάταξη και στοιχεία σελίδας θα δείτε ότι πάνω από την κεφαλίδα προστέθηκε στοιχείο σελίδας (προσθήκη gadget). Πηγαίνουμε στο site όπου ανεβάσαμε το logo μας και βλέπουμε ότι η σελίδα μας δίνει διάφορες επιλογές: IM, Forum, Alt Forum και HTML στο ImageShack και Share URL, Direct Link, HTML Code και IMG Code στο PhotoBucket. Σε όποιο site και αν ανεβάσαμε το logo μας εμείς επιλέγουμε τον κώδικα δηλαδή το HTML τον οποίο τον κάνουμε αντιγραφή - επικόλληση (copy - paste) στο gadget που δημιουργήσαμε προηγουμένως πάνω από την κεφαλίδα. Δηλαδή πάμε πανόπτης, διάταξη, και προσθήκη gadget. Ανοίγει ένα παράθυρο και επιλέγουμε προσθήκη HTML/JavaScript, κάνουμε επικόλληση των κώδικα και αποθήκευση. Πατάμε προεπισκόπηση και αν μας αρέσει το αποτέλεσμα το κρατάμε. Αν η κεφαλίδα έχει κείμενο η φωτογραφία και θέλουμε να τα εξαφανίσουμε τότε πάμε στην κεφαλίδα (header) πατάμε επεξεργασία (edit) και σβήνουμε ότι θέλουμε. Στο τέλος πατάμε αποθήκευση (save) και τέλος. Καλή διασκέδαση.

Με το πείραγμα του κώδικα του template δημιουργήσαμε στοιχεία σελίδας (προσθήκη gadgets)
πάνω από την κεφαλίδα (header). Εννοείται ότι μπορείτε να προσθέσετε ότι είδος widget θέλετε.
back to top