Το κείμενο του 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>
Το αποτέλεσμα είναι το παρακάτω:
Όταν δημιουργήσετε τον κώδικα του banner σας η προσθήκη αυτού είναι εύκολη υπόθεση. Πάτε πανόπτης, διάταξη, προσθήκη gadget και HTML/JavaScript και πατάτε αποθήκευση (save).Σχετικά με το πως βρίσκουμε τις κωδικές ονομασίες των χρωμάτων για να αλλάξουμε το όνομα της γραμματοσειράς ή το χρώμα του φόντου είχα περιγράψει έναν τρόπο στο post για την προσθήκη animated cloud. Ας τον επαναλάβουμε:
Για να αλλάξουμε χρώμα στο φόντο ή τη γραμματοσειρά πρέπει να αλλάξουμε την παράμετρο #ffffff. Πώς όμως; Πρέπει να ανοίξουμε άλλο ένα παράθυρο εργασίας στον browser και να μπούμε πάλι στο λογαριασμό μας και από εκεί πάμε πανόπτης, διάταξη και γραμματοσειρές και χρώματα. Εκεί μπορούμε να δούμε τον κωδικό των χρωμάτων φόντου και γραμματοσειρών. Δείτε την παρακάτω φωτογραφία (κλικ για μεγέθυνση): Στα δεξιά βλέπετε τον κωδικό χρώματος που στην προκειμένη περίπτωση είναι το άσπρο. Εσείς στον κώδικα πρέπει να βάλετε τον κωδικό του χρώματος του template σας.
Άλλος τρόπος είναι να ψάξουμε μέσω της Google για free color generator. Ένα free download code generator μπορείτaι να κάνετε από εδώ. Καλή επιτυχία!
Ωπ....αυτό για να σταματάει όταν "περάσει" το ποντίκι δε το ξερα...
ΑπάντησηΔιαγραφήΝα σαι καλά τσάκαλε!
perastikos tin kalispera moy ..eisai protos dimitri eyharistoyme gia tin voitheia...
ΑπάντησηΔιαγραφή@NOVITO Την καλημέρα μου. Όντως έχεις πολλές επιλογές αν δεις στον πίνακα.
ΑπάντησηΔιαγραφή@OI.METHISTANES Γεια σου Βαγγέλη.
@OI.METHISTANES Βαγγέλη δε μου είπες όλα καλά με τον translator για το facebook;
ΑπάντησηΔιαγραφήhackaday κώδικα για να κάνουμε το κείμενο να αναβοσβήνει μήπως....? Ε φανταστικέ hackaday...? :D
ΑπάντησηΔιαγραφήNOVITO Νομίζω ότι ένας φίλος μου κάτι έχει... Αν το δω το Σαββατοκύριακο θα τον ρωτήσω... Αναμονή λοιπόν...
ΑπάντησηΔιαγραφήHACKADAY ΠΟΛΥ ΩΡΑΙΟ ΑΛΛΑ ΠΩΣ ΓΙΝΕΤΑΙ ΝΑ ΒΑΛΩ ΕΙΚΟΝΑ ΜΕΣΑ ΣΕ ΑΥΤΟ ΜΑΖΙ ΜΕ ΤΟ ΚΕΙΜΕΝΟ
ΑπάντησηΔιαγραφή@Alexas Εννοείς στο ίδιο πλαίσιο;
ΑπάντησηΔιαγραφήναι στο ιδιο πλαισιο εννοω και να σερνεται η εικονα μαζι με το κειμενο
ΑπάντησηΔιαγραφή@Alexas Δε γίνεται αλλά μπορείς να κάνεις ένα animation πολύ εύκολα με το ίδιο κείμενο και διαφορετικές εικόνες ή με μια εικόνα και διαφορετικά κείμενα. Μπες εδώ: http://locublogus.blogspot.com/2009/07/animation-generator.htm
ΑπάντησηΔιαγραφήΑν συναντήσεις πρόβλημα πες μου.
thanks φίλε δεν δυσκολεύτικα εύκολο ήταν
ΑπάντησηΔιαγραφή@Alexas Να 'σαι καλά.
ΑπάντησηΔιαγραφήΦανταστική η ανάρτηση σου.
ΑπάντησηΔιαγραφήΤην έκανα πράξη αμέσως και το χάρηκα γιατί μου αρέσει να υπάρχει κίνηση στο blog.
Αν θέλεις μπορείς να δεις το blog μου.
Θα με χαροποιούσε ιδιαιτέρως.
@xristin Να 'σαι καλά. Πέρασα από το ιστολόγιο σου και απ' ότι είδα είσαι καινούρια στη blogόσφαιρα. Καλορίζικη λοιπόν. Εδώ πέρα θα βρεις πολλά χρήσιμα πραγματάκια, κόλπα, συμβουλές για τα ιστολόγια και όχι μόνο. Η θεματολογία του Locus Blogus επεκτείνεται και σε θέματα σχετικά με τους υπολογιστές, χρήσιμες δωρεάν εφαρμογές, Tutorials κ.α.
ΑπάντησηΔιαγραφήΌσο για την κίνηση σε ιστοσελίδα ή σε ιστολόγιο έχεις δίκιο. Το κάνει να δείχνει πιο δυναμικό, αρκεί βέβαια να μην το παρακάνουμε και καταντήσει γραφικό.
Αυτό το έχω δει και μου άρεσε πολύ. Θα το υιοθετήσω σύντομα. Την καλησπέρα μου!
ΑπάντησηΔιαγραφή@Σταυροβελονιά Καλημέρα. Ψάξε και θα βρεις και άλλα ωραία στο Locus Blogus.
ΑπάντησηΔιαγραφή