RSS

ΔΗΜΙΟΥΡΓΙΑ ΚΑΙ ΠΡΟΣΘΗΚΗ ANIMATED TEXT BANNER

15 Φεβ.

Σήμερα θα σας δείξω πως μπορούμε να βάλουμε ένα κινούμενο banner. Ονομάζεται scrolling or marqee text, δηλαδή το κείμενο του banner κινείται από πάνω προς τα κάτω ή το αντίθετο ή από αριστερά προς τα δεξιά και το αντίθετο. Πρώτα πρέπει αν καταλάβουμε πως δουλεύει ο κώδικας έτσι ώστε να τον φέρουμε στα μέτρα μας.
Το κείμενο του banner πρέπει να περικλείεται από δύο tags. Το opening tag και το closing tag. Δείτε το παρακάτω παράδειγμα:

<opening tag> Το κείμενο σας </closing tag>

Ο κώδικας για το scrolling or marqee text banner πρέπει να μοιάζει με τον παρακάτω:

<marquee>Το κείμενο σας – Demo</marquee>

Αν προσθέσετε τον παραπάνω κώδικα στο blogspot θα δείτε ένα demo κείμενο σε άσπρο φόντο (background) και ακίνητο. Εμείς πρέπει να προσθέσουμε στον κώδικα χρώμα φόντου, ταχύτητα που κινείται το κείμενο, κατεύθυνση κειμένου, διαστάσεις banner. Για να προσθέσουμε όλα τα παραπάνω είναι ιδιαίτερα εύκολο, απλά θέλει λιγάκι προσοχή. Για παράδειγμα, για να βάλουμε κατεύθυνση κειμένου πρέπει να προσθέσουμε στον κώδικα το παρακάτω:
direction=»right»

Το παραπάνω πρέπει να προστεθεί μετά το opening tag που στην περίπτωση μας είναι το <marquee> Ο κώδικας του banner θα πρέπει να δείχνει κάπως έτσι:

<marquee direction=»right»>Το κείμενο σας – Demo</marquee>

Με τον ίδιο τρόπο προσθέτουμε και τα υπόλοιπα στοιχεία, values στα αγγλικά, (χρώμα φόντου, ταχύτητα που κινείται το κείμενο, διαστάσεις banner) στον κώδικα. Ας προσθέσουμε χρώμα φόντου. Το στοιχείο που θα προσθέσουμε είναι της μορφής bgcolor=»#FF00FF» (όπου #FF00FF είναι το χρώμα). Να θυμάστε ότι πάντα προσθέτουμε τα values μετά το opening tag που στην περίπτωση μας είναι το <marquee> Ο κώδικας θα πρέπει να μοιάζει με τον παρακάτω:

<marquee bgcolor=»#FF00FF» direction=»right»>Το κείμενο σας – Demo</marquee> Με τον ίδιο τρόπου βάζουμε και τα υπόλοιπα στοιχεία του βαννερ μας. Παρακάτω έχω ένα πίνακα με τα στοιχεία που μπορείτε να προσθέσετε και μια μικρή επεξήγηση του καθενός.

The Value

ΕΠΕΞΗΓΗΣΗ

direction=»left» Κάνει το κείμενο να κινείται προς τα αριστερά.
direction=»right» Κάνει το κείμενο να κινείται προς τα δεξιά.
direction=»up» Κάνει το κείμενο να κινείται προς τα πάνω.
direction=»down»
Κάνει το κείμενο να κινείται προς τα κάτω.
behavior=»alternate» Κάνει το κείμενο να κινείται προς τα δεξιά και μόλις φτάσει στο τέλος της διαδρομής του το κείμενο αλλάζει κατεύθυνση (προς τα αριστερά) και επιστρέφει στην αρχή.
behavior=»slide» Κάνει το κείμενο να σταματάει μόλις φτάσει στο τέλος της διαδρομής του.
loop=»4″ Αν θέλετε να ελέγχετε πόσες φορές θα εμφανιστεί το κείμενο στο banner προσθέστε αυτό το value και αλλάξτε τον αριθμό (4) στον επιθυμητό από εσάς.
scrollamount=»2″ Με αυτό το value ελέγχετε την ταχύτητα που κινείται το κείμενο. Το 1 είναι αργό, το 2 γρηγορότερο και τα 3, 4, 5 ακόμη γρηγορότερα. Όσο μεγαλύτερο αριθμό βάλετε τόσο αυξάνεται η ταχύτητα με την οποία κινείται το κείμενο.
width=»400″ Με αυτό ελέγχετε το πλάτος του banner. Όσο μεγαλύτερη τιμή τόσο φαρδύτερο το banner.
height=»66″ Με αυτό ελέγχετε το ύψος του banner. Όσο μεγαλύτερη τιμή τόσο ψηλότερο το banner.
onmouseover=»this.stop()» onmouseout=»this.start()» Με αυτό το value καθορίζουμε το κείμενο να σταματάει όταν πάνω στο banner βρίσκεται ο δείκτης από το ποντίκι και όταν το απομακρύνουμε να συνεχίσει να κινείται το κείμενο.
bgcolor=»#9999CC» Με αυτό αλλάζουμε το χρώμα του φόντου (background). Θα σας δείξω αργότερα πως βρίσκουμε την κωδική ονομασία του επιθυμητού χρώματος.
style=»color: #FF0000″ Με αυτό αλλάζουμε το χρώμα της γραμματοσειράς. Θα σας δείξω αργότερα πως βρίσκουμε την κωδική ονομασία του επιθυμητού χρώματος.
style=»font-size: 1em» Με αυτό αλλάζουμε το μέγεθος της γραμματοσειράς.
style=»font-family: Tahoma» Με αυτό αλλάζουμε τη γραμματοσειρά.
style=»font-size: 12pt; color:
#800000; font-family: Tahoma»
Με αυτόν το τρόπο μπορούμε να προσθέσουμε στον κώδικα του banner τα values και να αλλάξουμε τη γραμματοσειρά, το μέγεθος αυτής και το χρώμα αυτής.

Αν θέλετε να βάλετε links αντί για κείμενο θα πρέπει να ανάμεσα στα opening tags να βάλετε τον παρακάτω κώδικα:

<a href=»Link URL»>Link Title</a>

Αν θέλετε και κείμενο και link απλά μέσα στο κείμενο βάλτε τον παραπάνω κώδικα και όπου Link URL είναι η διεύθυνση που θέλετε να βάλετε και όπου Link Title είναι ο τίτλος για το link.
Ένας demo κώδικας για animated banner που φτιάξαμε είναι ο παρακάτω:

<marquee direction=»Up» scrollamount=»8″ width=»318″ style=»font-size: 12pt;
color: #800000; font-family: Tahoma» height=»66″ bgcolor=»#FFCC99″>Το κείμενο σας – Demo</marquee>

Το αποτέλεσμα είναι το παρακάτω:

Το κείμενο σας - Demo

Όταν δημιουργήσετε τον κώδικα του banner σας η προσθήκη αυτού είναι εύκολη υπόθεση. Πάτε πανόπτης, διάταξη, προσθήκη gadget και HTML/JavaScript και πατάτε αποθήκευση (save).
Σχετικά με το πως βρίσκουμε τις κωδικές ονομασίες των χρωμάτων για να αλλάξουμε το όνομα της γραμματοσειράς ή το χρώμα του φόντου είχα περιγράψει έναν τρόπο στο post για την προσθήκη animated cloud. Ας τον επαναλάβουμε:
Για να αλλάξουμε χρώμα στο φόντο ή τη γραμματοσειρά πρέπει να αλλάξουμε την παράμετρο #ffffff. Πώς όμως; Πρέπει να ανοίξουμε άλλο ένα παράθυρο εργασίας στον browser και να μπούμε πάλι στο λογαριασμό μας και από εκεί πάμε πανόπτης, διάταξη και γραμματοσειρές και χρώματα. Εκεί μπορούμε να δούμε τον κωδικό των χρωμάτων φόντου και γραμματοσειρών. Δείτε την παρακάτω φωτογραφία (κλικ για μεγέθυνση): Στα δεξιά βλέπετε τον κωδικό χρώματος που στην προκειμένη περίπτωση είναι το άσπρο. Εσείς στον κώδικα πρέπει να βάλετε τον κωδικό του χρώματος του template σας.

Άλλος τρόπος είναι να ψάξουμε μέσω της Google για free color generator. Ένα free download code generator μπορείτaι να κάνετε από εδώ. Καλή επιτυχία!

Advertisements
 
16 Σχόλια

Posted by στο Φεβρουαρίου 15, 2009 in ANIMATION, BANNER, BLOGGER, BLOGSPOT, GADGET, TEXT, WIDGET

 

16 responses to “ΔΗΜΙΟΥΡΓΙΑ ΚΑΙ ΠΡΟΣΘΗΚΗ ANIMATED TEXT BANNER

  1. NOVITO

    Φεβρουαρίου 16, 2009 at 12:36 πμ

    Ωπ….αυτό για να σταματάει όταν «περάσει» το ποντίκι δε το ξερα…Να σαι καλά τσάκαλε!

     
  2. OI.METHISTANES

    Φεβρουαρίου 16, 2009 at 1:04 πμ

    perastikos tin kalispera moy ..eisai protos dimitri eyharistoyme gia tin voitheia…

     
  3. hackaday

    Φεβρουαρίου 16, 2009 at 5:48 πμ

    @NOVITO Την καλημέρα μου. Όντως έχεις πολλές επιλογές αν δεις στον πίνακα.@OI.METHISTANES Γεια σου Βαγγέλη.

     
  4. hackaday

    Φεβρουαρίου 19, 2009 at 10:54 μμ

    @OI.METHISTANES Βαγγέλη δε μου είπες όλα καλά με τον translator για το facebook;

     
  5. NOVITO

    Ιουνίου 4, 2009 at 8:58 πμ

    hackaday κώδικα για να κάνουμε το κείμενο να αναβοσβήνει μήπως….? Ε φανταστικέ hackaday…? 😀

     
  6. hackaday

    Ιουνίου 4, 2009 at 6:07 μμ

    NOVITO Νομίζω ότι ένας φίλος μου κάτι έχει… Αν το δω το Σαββατοκύριακο θα τον ρωτήσω… Αναμονή λοιπόν…

     
  7. Alexas

    Δεκέμβριος 12, 2009 at 5:56 μμ

    HACKADAY ΠΟΛΥ ΩΡΑΙΟ ΑΛΛΑ ΠΩΣ ΓΙΝΕΤΑΙ ΝΑ ΒΑΛΩ ΕΙΚΟΝΑ ΜΕΣΑ ΣΕ ΑΥΤΟ ΜΑΖΙ ΜΕ ΤΟ ΚΕΙΜΕΝΟ

     
  8. hackaday

    Δεκέμβριος 13, 2009 at 7:34 πμ

    @Alexas Εννοείς στο ίδιο πλαίσιο;

     
  9. Alexas

    Δεκέμβριος 13, 2009 at 8:36 πμ

    ναι στο ιδιο πλαισιο εννοω και να σερνεται η εικονα μαζι με το κειμενο

     
  10. hackaday

    Δεκέμβριος 13, 2009 at 9:01 πμ

    @Alexas Δε γίνεται αλλά μπορείς να κάνεις ένα animation πολύ εύκολα με το ίδιο κείμενο και διαφορετικές εικόνες ή με μια εικόνα και διαφορετικά κείμενα. Μπες εδώ: http://locublogus.blogspot.com/2009/07/animation-generator.htmΑν συναντήσεις πρόβλημα πες μου.

     
  11. Alexas

    Δεκέμβριος 13, 2009 at 3:49 μμ

    thanks φίλε δεν δυσκολεύτικα εύκολο ήταν

     
  12. hackaday

    Δεκέμβριος 13, 2009 at 4:42 μμ

    @Alexas Να 'σαι καλά.

     
  13. xristin

    Μαρτίου 14, 2010 at 11:56 μμ

    Φανταστική η ανάρτηση σου.Την έκανα πράξη αμέσως και το χάρηκα γιατί μου αρέσει να υπάρχει κίνηση στο blog.Αν θέλεις μπορείς να δεις το blog μου.Θα με χαροποιούσε ιδιαιτέρως.

     
  14. hackaday

    Μαρτίου 15, 2010 at 12:16 πμ

    @xristin Να 'σαι καλά. Πέρασα από το ιστολόγιο σου και απ' ότι είδα είσαι καινούρια στη blogόσφαιρα. Καλορίζικη λοιπόν. Εδώ πέρα θα βρεις πολλά χρήσιμα πραγματάκια, κόλπα, συμβουλές για τα ιστολόγια και όχι μόνο. Η θεματολογία του Locus Blogus επεκτείνεται και σε θέματα σχετικά με τους υπολογιστές, χρήσιμες δωρεάν εφαρμογές, Tutorials κ.α. Όσο για την κίνηση σε ιστοσελίδα ή σε ιστολόγιο έχεις δίκιο. Το κάνει να δείχνει πιο δυναμικό, αρκεί βέβαια να μην το παρακάνουμε και καταντήσει γραφικό.

     
  15. Σταυροβελονιά

    Οκτώβριος 20, 2010 at 9:36 μμ

    Αυτό το έχω δει και μου άρεσε πολύ. Θα το υιοθετήσω σύντομα. Την καλησπέρα μου!

     
  16. hackaday

    Οκτώβριος 20, 2010 at 9:43 μμ

    @Σταυροβελονιά Καλημέρα. Ψάξε και θα βρεις και άλλα ωραία στο Locus Blogus.

     

Σχολιάστε

Εισάγετε τα παρακάτω στοιχεία ή επιλέξτε ένα εικονίδιο για να συνδεθείτε:

Λογότυπο WordPress.com

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό WordPress.com. Αποσύνδεση / Αλλαγή )

Φωτογραφία Twitter

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Twitter. Αποσύνδεση / Αλλαγή )

Φωτογραφία Facebook

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Facebook. Αποσύνδεση / Αλλαγή )

Φωτογραφία Google+

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Google+. Αποσύνδεση / Αλλαγή )

Σύνδεση με %s

 
Αρέσει σε %d bloggers: