Βάλτε τους κωδικούς σας -html codes, scripts- σε ειδικά σχεδιασμένα κουτιά

Γεια σας,

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

Σήμερα θα σας δείξω πως να το κάνετε κι εσείς αυτό.

Προσέξτε (!!!):

Αυτή η ανάρτηση δεν έχει καμία σχέση με αυτην την ανάρτηση: http://www.johnpatra.com/2009/10/html-blog-post-html-code.html (επισκεφτείτε την!)

Το Html code converter κάνει τους html κώδικες ορατούς. Η σημερινή ανάρτηση δεν έχει καμία σχέση με αυτό. Η σημερινή ανάρτηση, απλά δείχνει έναν ωραίο τρόπο για να εμφανίζονται ωραία οι κωδικοί αυτοί μέσα σε πλαίσια.

Απο την στιγμή που θέλετε να κάνετε ορατούς τους html κωδικούς, θα τους μετατρέπετε πάντα.

Επίσης μέσα σε αυτά τα πλαίσα-κουτιά δεν είναι απαραίτητο να βάζετε μόνο scripts. Μπορείτε να βάζετε ότι θέλετε.


Λοιπόν κάντε σύνδεση στον blogger account σας, και από τον πανόπτη μας, πατάμε στην καρτέλα "Σχεδίαση" (γιατί το αλλάξανε αυτό? εγώ ακόμα Διάταξη το λέω :).

Πατήστε "Επεξεργασία html".

Με την βοήθεια του ctrl+F, βρείτε τον παρακάτω κωδικό:

]]></b:skin>

Αφού τον βρείτε, επικολλήστε αμέσως από πάνω του, τον παρακάτω CSS κωδικό:

.codeview {
font-family: Arial, Helvetica, sans-serif;
color: #CC0000;
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
border-top : 2px solid #cccccc;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 2px solid #cccccc;
background-color: #FFFFFF;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

Αποθήκευσε το πρότυπό σου.

Πατήστε τώρα στην καρτέλα που λέει "Ρυθμίσεις".

Στις υποκαρτέλες πατήστε στη "Διαμόρφωση".

Κυλήστε με το ποντίκι σας κάτω-κάτω.

Εκεί που λέει "Πρότυπο Ανάρτησης", βλέπετε που έχει δίπλα ένα πλαίσιο.

Λογικά αυτό το πλαίσιο θα σας είναι άδειο, εκτός αν χρησιμοποιείτε το read more ή έχετε βάλει κάτι άλλο. Τέλοσπάντων δεν μας ενδιαφέρει αν είναι άδειο ή γεμάτο.

Λοιπόν μέσα σε αυτό το πλαίσιο επικολλήστε τον παρακάτω κωδικό:

<div class="codeview">
Βάλετε ανάμεσα στους δύο κωδικούς ότι θέλετε να εμφανίζεται μέσα στο κουτάκι.
</div>

Αποθηκεύστε τις ρυθμίσεις σας.

Είστε σχεδόν έτοιμοι.

Από εδώ και πέρα κάθε φορά που θα πηγαίνετε να γράψετε μια ανάρτηση (όταν γράφετε μια νέα ανάρτηση να βρισκόσαστε στην καρτέλα "Επεξεργασία html" και όχι στην καρτέλα "Σύνθεση"), θα βλέπετε τους κωδικούς που σας είπα να αποθηκεύστε πριν στις ρυθμίσεις>διαμόρφωση. Αν δεν θέλετε να βάλετε κάποιο κωδικό απλά τους σβήνετε και συνεχίζετε να γράφετε την ανάρτηση. Αν θέλετε όμως να βάλετε κάτι που να φαίνεται μέσα στο κουτάκι, το βάζετε ανάμεσα στους δύο κωδικούς. Φυσικά σβήνετε τα δικά μου λόγια, τα "Βάλετε ανάμεσα στους δύο κωδικούς ότι θέλετε να εμφανίζεται μέσα στο κουτάκι.". Αυτά τα έχω γράψει για να σας βοηθήσω. Αυτά τα σβήνετε σε κάθε περίπτωση. Εσείς απλά βάζετε αυτό που θέλετε να φαίνεται στο κουτάκι ανάμεσα στο <div class="codeview"> και ανάμεσα στο </div>. Σας τα είπα αναλυτικά και πιστεύω να τα καταλάβατε. Αν όχι, αφήστε ένα σχόλιο και πείτε μου, που "κολλάτε".

Α και κάτι άλλο:

Μπορείτε να ρυθμίσετε μόνοι σας τα χρώματα του κουτιού. Για παράδειγμα κάποιος που έχει μαύρο background (εγώ!) δεν θα βάλει σκούρα χρώματα στο κουτί, αλλά φωτεινά. Και, αντίθετα, κάποιος που έχει άσπρο φόντο στο blog του, θα βάλει σκούρα χρώματα στο κουτί για να δημιουργείται η απαραίτητη αντίθεση χρωμάτων.

Αλλά πως τα αλλάζετε?

Πολύ απλά από τον κωδικό που επικολλήσαμε πάνω από το ]]></b:skin>.

Σε αυτόν τον κωδικό βλέπετε που έχει διάφορους κωδικούς τέτοιας μορφής: #000000 ?

Στη γλώσσα του html, κάθε χρώμα συμβολίζεται με ένα # και έξι νούμερα μετά από το #.

Επομένως το #000000 είναι ένα χρώμα και συγκεκριμένα το μαύρο.

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

Για να βρείτε εύκολα και γρήγορα τους 6ψήφιους κωδικούς των χρωμάτων της αρεσκείας σας πατήστε εδώ!

Καλή σας μέρα!

Αν έχετε πρόβλημα ή αν όλα σας πήγαν καλά, αφήστε ένα σχόλιο και αν σας άρεσε αυτη η ανάρτηση προωθήστε τη στο facebook πατώντας το παρακάτω κουμπί: