Πως βάζουμε Scrolling texts στο blog μας
Αρκετοί bloggers μέχρι σήμερα, μου έστειλαν μηνύματα, που με ρωτούσαν πως να βάλουν scrolling texts στα blogs τους. Κάτι σαν αυτό που έχω στο άλλο μου blog. Ένα κειμενάκι δηλαδή, που κινείται προς μία, και όχι μόνο, κατεύθυνση, και προσθέτει στα blogs μία όμορφη πινελιά, που προσελκύει τους αναγνώστες πάνω σε αυτό ακριβώς που έχουμε γράψει, και που θέλουμε να τονίσουμε ιδιαίτερα.
Θα πρέπει σ' αυτό το σημείο να σας τονίσω ότι πολύ μεγάλα κείμενα, ή υψηλή ταχύτητα κίνησής τους, κουράζουν αφάνταστα τους αναγνώστες, με αποτελέσματα εντελώς αντίθετα από αυτά που θέλουμε. Γι αυτό θα πρέπει να τα χρησιμοποιείται με σύνεση και απλότητα.
Σήμερα θα σας δείξω πως γίνεται αυτό.
Πάμε λοιπόν να τα δούμε ένα ένα.
1. Για ένα απλό scrolling text, όπου το κείμενο θα ρολλάρει από δεξιά προς τα αριστερά, χρησιμοποιούμε τον παρακάτω κώδικα.
<marquee>Απλό scrolling text</marquee>
Το αποτέλεσμα θα είναι αυτό.
2. Το ίδιο απλό, αλλά με χρώμα στο background, χρησιμοποιήστε αυτό.
<marquee bgcolor="#FF0000">Απλό scrolling text με χρώμα</marquee>
Μπορείτε να βάλετε οποιοδήποτε χρώμα, αλλάζοντας τον Hex κωδικό που είναι με κόκκινο χρώμα.
Μπορείτε να μπείτε ΕΔΩ και να δημιουργήσετε όποιο χρώμα θέλετε, βρίσκοντας τον κωδικό του.
Το αποτέλεσμα θα είναι αυτό.
3. Μία ακόμα επιλογή είναι να πηγαίνει το κείμενο από αριστερά (left) προς τα δεξιά (right), ή πάνω (up) κάτω (down) και αντίστροφα.
Σε αυτή την περίπτωση τοποθετούμε στον κωδικό μας, μία από τις παρακάτω επιλογές.
direction="left"
direction="right"
direction="up"
direction="down"
Ο κωδικός θα γίνει έτσι.
<marquee direction="right" bgcolor="#99CCFF">Απλό scrolling text με αλλαγή κατεύθυνσης</marquee>
Για να κάνουμε αλλαγή κατεύθυνσης, αλλάζουμε το κομμάτι του κωδικού με το κόκκινο χρώμα, με κάποια από τις επιλογές που γράφω παραπάνω.
Το αποτέλεσμα, για κάθε περίπτωση θα είναι αυτά.
4. Μία ακόμα παραλλαγή του κωδικού, είναι το κείμενό μας να πηγαινοέρχεται. Ο κωδικός θα γίνει έτσι.
<marquee behavior="alternate" direction="down" bgcolor="#33FFCC">Απλό scrolling text που πηγαινοέρχεται</marquee>
5. Μία ακόμη σημαντική ρύθμιση που μπορείτε να κάνετε, είναι να ρυθμίσετε την ταχύτητα που θα κινείται το κείμενο. Χρησιμοποιήστε τον παρακάτω κώδικα, αλλάζοντας τον αριθμό με το κόκκινο χρώμα, με τον επιθυμητό νούμερο.
<marquee behavior="alternate" direction="left" bgcolor="#9999CC" scrollamount="2">Κώδικας απλού scrolling κειμένου</marquee>
6. Κάτι επίσης που θα διευκολύνει αφάνταστα τους αναγνώστες σας, είναι να σταματάει το scrolling όταν ο αναγνώστης τοποθετεί πάνω του, το δείκτη του ποντικιού. Έτσι θα μπορέσει να το αναγνώσει με μεγαλύτερη ευκολία.
Θα πρέπει σ' αυτό το σημείο να σας τονίσω ότι πολύ μεγάλα κείμενα, ή υψηλή ταχύτητα κίνησής τους, κουράζουν αφάνταστα τους αναγνώστες, με αποτελέσματα εντελώς αντίθετα από αυτά που θέλουμε. Γι αυτό θα πρέπει να τα χρησιμοποιείται με σύνεση και απλότητα.
Σήμερα θα σας δείξω πως γίνεται αυτό.
Πάμε λοιπόν να τα δούμε ένα ένα.
1. Για ένα απλό scrolling text, όπου το κείμενο θα ρολλάρει από δεξιά προς τα αριστερά, χρησιμοποιούμε τον παρακάτω κώδικα.
<marquee>Απλό scrolling text</marquee>
Το αποτέλεσμα θα είναι αυτό.
2. Το ίδιο απλό, αλλά με χρώμα στο background, χρησιμοποιήστε αυτό.
<marquee bgcolor="#FF0000">Απλό scrolling text με χρώμα</marquee>
Μπορείτε να βάλετε οποιοδήποτε χρώμα, αλλάζοντας τον Hex κωδικό που είναι με κόκκινο χρώμα.
Μπορείτε να μπείτε ΕΔΩ και να δημιουργήσετε όποιο χρώμα θέλετε, βρίσκοντας τον κωδικό του.
Το αποτέλεσμα θα είναι αυτό.
3. Μία ακόμα επιλογή είναι να πηγαίνει το κείμενο από αριστερά (left) προς τα δεξιά (right), ή πάνω (up) κάτω (down) και αντίστροφα.
Σε αυτή την περίπτωση τοποθετούμε στον κωδικό μας, μία από τις παρακάτω επιλογές.
direction="left"
direction="right"
direction="up"
direction="down"
Ο κωδικός θα γίνει έτσι.
<marquee direction="right" bgcolor="#99CCFF">Απλό scrolling text με αλλαγή κατεύθυνσης</marquee>
Για να κάνουμε αλλαγή κατεύθυνσης, αλλάζουμε το κομμάτι του κωδικού με το κόκκινο χρώμα, με κάποια από τις επιλογές που γράφω παραπάνω.
Το αποτέλεσμα, για κάθε περίπτωση θα είναι αυτά.
4. Μία ακόμα παραλλαγή του κωδικού, είναι το κείμενό μας να πηγαινοέρχεται. Ο κωδικός θα γίνει έτσι.
<marquee behavior="alternate" direction="down" bgcolor="#33FFCC">Απλό scrolling text που πηγαινοέρχεται</marquee>
5. Μία ακόμη σημαντική ρύθμιση που μπορείτε να κάνετε, είναι να ρυθμίσετε την ταχύτητα που θα κινείται το κείμενο. Χρησιμοποιήστε τον παρακάτω κώδικα, αλλάζοντας τον αριθμό με το κόκκινο χρώμα, με τον επιθυμητό νούμερο.
<marquee behavior="alternate" direction="left" bgcolor="#9999CC" scrollamount="2">Κώδικας απλού scrolling κειμένου</marquee>
6. Κάτι επίσης που θα διευκολύνει αφάνταστα τους αναγνώστες σας, είναι να σταματάει το scrolling όταν ο αναγνώστης τοποθετεί πάνω του, το δείκτη του ποντικιού. Έτσι θα μπορέσει να το αναγνώσει με μεγαλύτερη ευκολία.
<marquee behavior="alternate" direction="left" bgcolor="#CCCCCC" onmouseover="this.stopundefined)" onmouseout="this.startundefined)" scrollamount="2" scrolldelay="50"> Κώδικας απλού scrolling κειμένου</marquee>
Βάλτε το δείκτη του ποντικιού πάνω στο text για να το δοκιμάσετε.
7. Τέλος θα δούμε τι κάνουμε για να βάλουμε ένα link μέσα στο κείμενο, που πατώντας το ο επισκέπτης να οδηγείται στη σελίδα που θέλουμε. Ο κωδικός είναι αυτός
<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stopundefined)" onmouseout="this.startundefined)" scrollamount="4"> <a href="url#1">LINK#1</a> </marquee>
Αντικαταστήστε το Link#1, με το κείμενο που θα είναι link, και το url#1, με την αντίστοιχη ηλεκτρονική διεύθυνση (url address).
Να ένα παράδειγμα:
Μπορείτε να προσθέσετε και πάνω από ένα link, προσθέτοντας το <a href="url#1">LINK#1</a> για κάθε παραπανίσιο link που θα βάζετε.
Αν επιθυμείτε τα links να ανοίγουν σε νέο παράθυρο, προσθέστε το target="_blank" ,αμέσως μετά το <a και πριν το href
Εδώ τελειώσαμε. Ελπίζω να σας φάνηκε χρήσιμη αυτή η ανάρτηση.
Σ' αυτό το σημείο, να ευχαριστήσω τον ΑΑΤΟΝ, από το φιλικό blog Α! μπε μπα blog!, για την συναίνεσή του να αναδημοσιεύσω την συγκεκριμένη ανάρτηση από το blog του.
Εδώ τελειώσαμε. Ελπίζω να σας φάνηκε χρήσιμη αυτή η ανάρτηση.
Σ' αυτό το σημείο, να ευχαριστήσω τον ΑΑΤΟΝ, από το φιλικό blog Α! μπε μπα blog!, για την συναίνεσή του να αναδημοσιεύσω την συγκεκριμένη ανάρτηση από το blog του.
.png "English"){kind=small}
2 σχόλια:
Μπορούμε να αλλάξουμε το χρωμα των γραμμάτων
Κωνωπίνα, ναι.
Μπορείς να το κάνεις αυτό προσθέτοντας μία γραμμή κώδικα για font.
Για να σου δώσω ένα παράδειγμα, το απλό text θα δείχνει έτσι.
<marquee> <font color="#99CCFF">Κώδικας απλού scrolling κειμένου</font></marquee>
Δημοσίευση σχολίου