Κωδικός html μέσα σε κουτάκι

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

Το κουτάκι που θα βάλουμε είναι σαν το παρακάτω:

Προσοχή!
Για να κάνεις ορατούς τους HTML κωδικούς και να τους βάλεις στο κουτάκι αυτό θα πρέπει πάντα να τους μετατρέπεις. Την μετατροπή μπορείς να της κάνεις από ΕΔΏ:

http://bloggertricks.gr/2010/11/html-blog-post-html-code.html

Άρα πριν τους βάλεις στα πλαίσια (ειδικά κουτάκια), πρέπει να πας στο παραπάνω Link.
Έτσι θα κάνεις την μετατροπή του κώδικα και θα μπορούν οι αναγνώστες να τον δουν.

Πάμε να δούμε τώρα πως θα το εφαρμόσουμε στο Blog μας:

1) Σύνδεση στον blogger
2) Σχεδίαση
3) Επεξεργασία HTML
4)Aλλαγες στην επεξεργασία HTML στο blogger

ctrl F λειτουργεί μόνον όταν ο κέρσορας είναι μέσα στο πρότυπο, και ανοίγει ένα κουτάκι, οπου γράφετε τη λέξη κλειδί η τη φράση που ψάχνετε, και αμέσως χρωματίζονται οι αντίστοιχες φράσεις 

]]></b:skin>

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

.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 : &quot;Courier New&quot;, &quot;MS Sans Serif&quot;, sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

6) Αποθήκευση 

7) Αφού κάνεις Αποθήκευση, πήγαινε στην καρτέλα Ρυθμίσεις > Διαμόρφωση

8) Κάτω-κάτω θα βρείτε το Πρότυπο Ανάρτησης με ένα κουτάκι δίπλα.
Το πλαίσιο (κουτάκι) λογικά είναι άδειο, εκτός άμα είχατε προσθέσει κάτι στο παρελθόν.

Μέσα σε αυτό το κουτάκι κάντε επικόλληση τον παρακάτω κώδικα:

<div class="codeview">

Βάλε εδώ τους κώδικες HTML που θες να είναι μέσα στο κουτάκι.

</div>

9) Αποθήκευση 

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