Χρωματιστό κείμενο στην ανάρτηση

Στο διαδίκτυο κυκλοφορούν πολλά "πλαίσια", όπου μπορούμε να τοποθετήσουμε εκεί μέσα κείμενο.
Η τεχνολογία όμως προχωράει, και τα καινούρια δεδομένα που κυκλοφόρισαν, είναι άκρως εντυπωσιακά.
Πως θα σας φαινότανε να έχετε στην ανάρτησή σας ένα κείμενο με χρωματιστά γράμματα που αλλάζουν χρώμα μόλις βάζετε το ποντίκι πάνω τους. Και να μπορείτε να ορίσετε εσείς ποιο χρώμα θα έχουν, όπως και να βάλετε όποιο χρώμα προτιμάτε για backround;
Είμαι ο ekabitis, και σήμερα θα σας δείξω πώς γίνεται αυτό. (Ρίξτε μια ματιά εδώ, για να καταλάβετε τι ακριβώς εννοώ).
Πάμε στον Πανόπτη --> Διάταξη --> Επεξεργασία HTML και αφού πάρουμε (όπως πάντα), ένα backup του template μας, με το Ctrl+F ψάχνουμε να βρούμε το

]]></b:skin>

Ακριβώς από πάνω του τοποθετούμε τον παρακάτω κώδικα

.mbt-textarea {

padding:0;

margin:0;

width:400px;


height:40px;

color:#0080ff;

font:12px arial;

background:#fff;

border:1px dotted #289728; }

.mbt-textarea:hover {

color:#289728;

border:2px solid #666; }

.mbt {


padding-top:3px;


margin:0;


color:#289728;


font-size: 9px;


font-family: sans-serif, verdana;


}

Πριν πατήσουμε αποθήκευση, καλό είναι να πραγματοποιήσουμε τις αλλαγές που θέλουμε να κάνουμε, σύμφωνα με τα γούστα του καθενός.

1) Αν θέλετε να ορίσετε, δηλαδή να μειώσετε ή να αυξήσετε το ύψος ή το πλάτος της περιοχής κειμένου , απλά επεξεργαστείτε τις παρακάτω τιμές, με το θαλασσί χρώμα.
Πλάτος: 400px?
ύψος: 40px?

2) Για να αλλάξετε το χρώμα του κειμένου που θα φαίνεται, αλλάζουμε τον εξαψήφιο κωδικό (αυτόν με το πράσινο χρώμα), επιλέγοντας το χρώμα της αρεσκείας μας.
color: # 0080ff?
(Χρησιμοποιήστε την χρωματική παλέτα με τους αντίστοιχους κωδικούς των χρωμάτων, πατώντας ΕΔΩ http://ekabitis-tips-tricks.blogspot.com/2010/02/html-color-codes.html

3) Για να αλλάξετε το χρώμα του κειμένου σε λειτουργία, όταν δηλαδή περνάμε τον δείκτη του ποντικιού από πάνω, μπορείτε να επεξεργαστείτε τον κωδικό με το κόκκινο χρώμα
color: # 289728?

4) Για να αλλάξετε το πλάτος του περιθωρίου, το στυλ και το χρώμα όταν είναι σε ενεργό λειτουργία επεξεργαστείτε αυτόν τον κώδικα,

border: 1px dotted # 289728?

όπου 1px, είναι το πλάτος του πλαισίου. Είναι ρυθμισμένο σε διακεκομμένη γραμμή και το χρώμα είναι # 289728

5) Για να αλλάξετε την εμφάνιση του περιθωρίου, όταν δηλαδή περνάμε τον δείκτη του ποντικιού από πάνω, μπορείτε να επεξεργαστείτε τον κωδικό

border: 2px solid # 666?

6) Για να αλλάξετε τη γραμματοσειρά και το μέγεθος της, επεξεργαστείτε αυτό,

font: 12px Arial?

όπου 12px είναι το μέγεθος, και arial είναι η γραμματοσειρά ως προεπιλογή που έχω χρησιμοποιήσει.

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

<textarea class="mbt-textarea" readonly="readonly">ΕΔΩ ΓΡΑΦΟΥΜΕ ΚΕΙΜΕΝΟ</textarea>
<p class="mbt" ><u>Εδώ βάζουμε τίτλο ή κάποια οδηγία για το κείμενο</u></p>

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

.mbt {


padding-top:3px;


margin:0;


color:#289728;


font-size: 9px;


font-family: sans-serif, verdana;


}

Τώρα τελειώσαμε.
Αν θέλουμε μπορούμε να βάλουμε τέτοιο κείμενο και στην sidebar του blog μας, αλλάζοντας κατά περίπτωση τις διαστάσεις στις οποίες αναφερθήκαμε στην αρχή.
Οποιαδήποτε απορία έχετε, μην διστάσετε να επικοινωνήσετε μαζί μου.
Και μην ξεχάσετε να μου αφήσετε κάποιο σχόλιο, για το αν το καταφέρατε ή αν κάτι σας δυσκόλεψε