Caja contenedora para codigos html

-voy a explicaros la forma de crear una caja contenedora para poder mostrar nuestros códigos html.
-Podremos modificar a nuestro gusto los siguientes datos:
background, color, margin, padding etc.
Una vez hemos personalizado nuestro código base, accedemos a Edición Html de nuestra plantilla y sin necesidad de expandir artilugios lo pegaremos antes de ]]></b:skin> :

-CODIGO:

/* Caja de código */pre {padding-top:22px; /* Relleno - para ajustar Fondo */}pre code {overflow:auto; /* Determina si es necesario agregar barras de Scroll */background-color: #efffdf; /*Color de Fondo en Hex */border:1px solid #999999; /*Color de Borde en Hex */color:#333333; /*Color de letra en Hex */display:block; /* No tocar */padding:8px; /* Relleno del cuadro */white-space:pre; /* No tocar */text-align:left; /*Alineacion del Texto , left=izquierda, center= centrado, right=derecha */sumin-height:63px; /*Altura minima del Cuadro */}/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */code:hover {background-color: #CAF99B; /*Color de Fondo en Hex */border:1px solid #0066cc;/*Color de Borde en Hex */le}/*FIN Caja de código */

-Una vez agregado el código a nuestra plantilla guardamos los cambios y listo.
-Si queremos que cada vez que nos interese mostra un código aparezca nuestra caja, lo haremos de la siguiente forma:
-Al inicio de nuestro código pondremos las etiquetas <pre><code>Aquí el Código</code></pre>.
-Si queremos que aparezca automaticamente en nuestra plantilla "posts" accederemos a: Configuración/Formato/Plantilla de entrada donde añadiremos <pre><code></code></pre> y guardaremos los cambios efectuados.
El resultado final seria como el que os muestro en este post, pero con colores distintos.