Poner cuadro de código en el blog

Os enseñaré a hacer cuadros de código, que són muy prácticos a la hora de poner códigos en los blogs. Pero antes un ejemplo ;-) Lo normal es poner códigos dentro, pero no se me ocurre ninguno para el ejemplo, así que os hablo de otra cosa y pensáis que es un código de algo xDD

Esto es un ejemplo de cuadro de código, por eso voy a poner algo 
que no tiene nada que ver, pero que queda bien para el ejemplo xDDD

El cosplay (コスプレ) etimológicamente del inglés costume play, 
interpretacion de disfraces, practicado principalmente por jóvenes, 
consiste en disfrazarse de algún personaje (real o inspirado) de un 
manga, anime, película, libro, comic, videojuego o incluso cantantes 
y grupos musicales e intentar interpretarlo en la medida de lo posible. 
Aquellos que siguen esta práctica son conocidos como cosplayers, siendo 
para ellos una de sus principales aficiones.

Bien. Ahora el minitutorial de cómo hacer esto ^.^

1º Lo primero que haremos será ir a Diseño/ Edición HTML y marcamos la casilla de verificación de "Explandir plantillas de artilugios".

2º Buscamos esta etiqueta en el código: ] ] > < / b:skin> (pero sin los espacios).

3º Ponemos el siguiente código antes de ] ] > < / b:skin>.

pre {

        background:transparent url(#) no-repeat 0 0; /* AQUÍ PODÉIS PONERLE UNA IMAGEN AL CABECERO DEL CUADRO PONIÉNDOLE LA DIRECCIÓN WEB DONDE ESTÉ SUBIDA LA IMAGEN */

        padding-top:24px; /* PARA AJUSTAR EL RELLENO DEL FONDO */

}

pre code {

        overflow:auto; /* DETEMINA SI ES NECESARIO PONER SCROLL */

        background-color:#fffbe5; /* COLOR DEL FONDO DEL HEX */

        border:1px solid #fff1a3; /* COLOR DEL BORDE DEL HEX */   
        color:#7e1f09; /* COLOR DE LA LETRA EN HEX */      
        display:block; /* NO TOCAR PARA NADA */   
        padding:5px; /* RELLENO DEL CUADRO */

        white-space:pre; /* NO TOCAR PARA NADA */

        text-align:left; /* ALINEACIÓN DE LAS LETRAS */su

        min-height:63px; /* ALTURA MÍNIMA DEL CUADRO */}

/* CUANDO SE PASE EL RATÓN SOBRE EL CUADRO, PUEDE CAMBIAR DE COLOR: */

code:hover {

        background-color:#FEFEDD; /* COLOR DEL FONDO EN HEX */   
        border:1px solid #ffd511;/* COLOR DEL BORDE EN HEX */le

}

4º El cuadro se puede configurar con los colores que queramos. Sólo tenémos que cambiarlo en el código del paso 3º. Yo he encontrado una web donde se pueden coger los códigos de los colores. Esta es --> Generador HEX.

5º Por último, cuando queramos poner algún cuadro en alguna entrada del blog, pondremos en "Edición de HTML" lo siguiente, y dentro, el código que queramos poner. Eso sí, quitadle los espacios a las etiquetas de apertura y cierre, es que si no, no me deja ponerlo ^^

< pre>< code>AQUÍ DENTRO LO QUE QUERÁIS< /pre>< /code>