Πλαίσιο για κείμενο στην ανάρτηση
Στο διαδίκτυο κυκλοφορούν πολλά "πλαίσια", όπου μπορούμε να τοποθετήσουμε εκεί μέσα κείμενο.
Η τεχνολογία όμως προχωράει, και τα καινούρια δεδομένα που κυκλοφόρισαν, είναι άκρως εντυπωσιακά.
Πάμε στον Πανόπτη --> Διάταξη --> Επεξεργασία 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?
(Χρησιμοποιήστε την χρωματική παλέτα με τους αντίστοιχους κωδικούς των χρωμάτων, πατώντας ΕΔΩ
3) Για να αλλάξετε το χρώμα του κειμένου σε λειτουργία, όταν δηλαδή περνάμε τον δείκτη του ποντικιού από πάνω, μπορείτε να επεξεργαστείτε τον κωδικό με το κόκκινο χρώμα
color: # 289728?
4) Για να αλλάξετε το πλάτος του περιθωρίου, το στυλ και το χρώμα όταν είναι σε ενεργό λειτουργία επεξεργαστείτε αυτόν τον κώδικα,
border: 1px dotted # 289728?
όπου 1px, είναι το πλάτος του πλαισίου. Είναι ρυθμισμένο σε διακεκομμένη γραμμή και το χρώμα είναι # 289728
5) Για να αλλάξετε την εμφάνιση του περιθωρίου, όταν δηλαδή περνάμε τον δείκτη του ποντικιού από πάνω, μπορείτε να επεξεργαστείτε τον κωδικό
border: 2px solid # 666?
6) Για να αλλάξετε τη γραμματοσειρά και το μέγεθος της, επεξεργαστείτε αυτό,
font: 12px Arial?
όπου 12px είναι το μέγεθος, και arial είναι η γραμματοσειρά ως προεπιλογή που έχω χρησιμοποιήσει.
7) Για να αλλάξετε το χρώμα του backround επεξεργαστήτε το
background:#fff
Αυτό ήταν. Πατάμε αποθήκευση, και πάμε τώρα να σας δείξω πως βάζουμε το κείμενό μας.
Αφού έχουμε ετοιμάσει το κείμενο σε ένα σημειωματάριο ή ένα wordpad, το επιλέγουμε και το ποποθετούμε μέσα στον παρακάτω κώδικα, στο σημείο με τα κόκκινα γράμματα.
Η σειρά του κώδικα με το μπλέ-κιτρινο χρώμα, είναι προαιρετική, και είναι μια οδηγία ή κάποιος τίτλος που θέλουμε να βάλουμε για το κείμενό μας, και θα φαίνεται έξω από το κείμενο. Εκεί που είναι τα κίτρινα γράμματα, γράφουμε αυτό που θέλουμε να φαίνεται.
Η επεξεργασία αυτού του "οδηγού" γίνεται, βάζοντας τις τιμές που επιθυμούμε, τροποποιώντας τον κώδικα αυτόν. (Αυτός με το μπλε χρώμα που φαίνεται και παραπάνω).
Ακριβώς από πάνω του τοποθετούμε τον παρακάτω κώδικα ...
.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?
(Χρησιμοποιήστε την χρωματική παλέτα με τους αντίστοιχους κωδικούς των χρωμάτων, πατώντας ΕΔΩ
3) Για να αλλάξετε το χρώμα του κειμένου σε λειτουργία, όταν δηλαδή περνάμε τον δείκτη του ποντικιού από πάνω, μπορείτε να επεξεργαστείτε τον κωδικό με το κόκκινο χρώμα
color: # 289728?
4) Για να αλλάξετε το πλάτος του περιθωρίου, το στυλ και το χρώμα όταν είναι σε ενεργό λειτουργία επεξεργαστείτε αυτόν τον κώδικα,
border: 1px dotted # 289728?
όπου 1px, είναι το πλάτος του πλαισίου. Είναι ρυθμισμένο σε διακεκομμένη γραμμή και το χρώμα είναι # 289728
5) Για να αλλάξετε την εμφάνιση του περιθωρίου, όταν δηλαδή περνάμε τον δείκτη του ποντικιού από πάνω, μπορείτε να επεξεργαστείτε τον κωδικό
border: 2px solid # 666?
6) Για να αλλάξετε τη γραμματοσειρά και το μέγεθος της, επεξεργαστείτε αυτό,
font: 12px Arial?
όπου 12px είναι το μέγεθος, και arial είναι η γραμματοσειρά ως προεπιλογή που έχω χρησιμοποιήσει.
7) Για να αλλάξετε το χρώμα του backround επεξεργαστήτε το
background:#fff
Αυτό ήταν. Πατάμε αποθήκευση, και πάμε τώρα να σας δείξω πως βάζουμε το κείμενό μας.
Αφού έχουμε ετοιμάσει το κείμενο σε ένα σημειωματάριο ή ένα wordpad, το επιλέγουμε και το ποποθετούμε μέσα στον παρακάτω κώδικα, στο σημείο με τα κόκκινα γράμματα.
<textarea class="mbt-textarea" readonly="readonly">ΕΔΩ ΓΡΑΦΟΥΜΕ ΚΕΙΜΕΝΟ</textarea>
<p class="mbt" ><u>Εδώ βάζουμε τίτλο ή κάποια οδηγία για το κείμενο</u></p>
<p class="mbt" ><u>Εδώ βάζουμε τίτλο ή κάποια οδηγία για το κείμενο</u></p>
Η σειρά του κώδικα με το μπλέ-κιτρινο χρώμα, είναι προαιρετική, και είναι μια οδηγία ή κάποιος τίτλος που θέλουμε να βάλουμε για το κείμενό μας, και θα φαίνεται έξω από το κείμενο. Εκεί που είναι τα κίτρινα γράμματα, γράφουμε αυτό που θέλουμε να φαίνεται.
Η επεξεργασία αυτού του "οδηγού" γίνεται, βάζοντας τις τιμές που επιθυμούμε, τροποποιώντας τον κώδικα αυτόν. (Αυτός με το μπλε χρώμα που φαίνεται και παραπάνω).
.mbt {
padding-top:3px;
margin:0;
color:#289728;
font-size: 9px;
font-family: sans-serif, verdana;
}
padding-top:3px;
margin:0;
color:#289728;
font-size: 9px;
font-family: sans-serif, verdana;
}
Τώρα τελειώσαμε.
Αν θέλετε μπορείτε να βάλετε τέτοιο κείμενο και στην sidebar του blog σας, αλλάζοντας κατά περίπτωση τις διαστάσεις στις οποίες αναφερθήκαμε στην αρχή.
Ελπίζω να μην σας φάνηκε πολύ δύσκολο, λόγω των πολλών ρυθμίσεων που χρειάζεται να κάνετε. Το αποτέλεσμα όμως θα σας ανταμείψει!
Οποιαδήποτε απορία έχετε, μην διστάσετε να επικοινωνήσετε μαζί μου.
Και μην ξεχάσετε να μου αφήσετε κάποιο σχόλιο, για το αν το καταφέρατε ή αν κάτι σας δυσκόλεψε.
Αν θέλετε μπορείτε να βάλετε τέτοιο κείμενο και στην sidebar του blog σας, αλλάζοντας κατά περίπτωση τις διαστάσεις στις οποίες αναφερθήκαμε στην αρχή.
Ελπίζω να μην σας φάνηκε πολύ δύσκολο, λόγω των πολλών ρυθμίσεων που χρειάζεται να κάνετε. Το αποτέλεσμα όμως θα σας ανταμείψει!
Οποιαδήποτε απορία έχετε, μην διστάσετε να επικοινωνήσετε μαζί μου.
Και μην ξεχάσετε να μου αφήσετε κάποιο σχόλιο, για το αν το καταφέρατε ή αν κάτι σας δυσκόλεψε.
Αν βρίσκετε χρήσιμες τις αναρτήσεις μου, και θέλετε να σας έρχονται μέσω e-mail, για να ενημερώνεστε άμεσα για κάθε καινούρια ανάρτηση, κάντε ενγραφή στο RssFeed που βρίσκεται στη sidebar του Blog μου!
.png "English"){kind=small}
0 σχόλια:
Δημοσίευση σχολίου