Caja contenedora para código

Gracias a Gem@
vamos a probar una caja contenedora para mostrar los códigos.Para hacerlo agregaremos este codigo en la parte CSS de nuestra plantilla, justo encima de ]]></b:skin>

/* Caja de código */
pre {
background:transparent url(aquí la url de una imagen) no-repeat 0 0; /* Imagen Superior, si deseas cambiarla modifica lo que se encuentra dentro de url(AQUI) */
padding-top:22px; /* Relleno - para ajustar Fondo */
}
pre code {
overflow:auto; /* Determina si es necesario agregar barras de Scroll */
background-color:#E9E9E9; /* Color de Fondo en Hex */
border:1px solid #999999; /* Color de Borde en Hex */
color:#990000; /* 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:##ffffff; /* Color de Fondo en Hex */
border:1px solid ##666666;/* Color de Borde en Hex */le
}
/* FIN Caja de código */

Ahora, donde dice aquí url de una imagen puedes substituirlo por la dirección de la imagen que quieras como cabecera de la caja contenedora, eso si, ten en cuenta la medida de la caja para que la imagen quede bien.
Si no quieres mostrar ninguna imagen y solo te interesa la caja, ólo tienes que borrar lo que se encuentra entre los parentesis. También puedes variar el tamaño de la caja y sus colores para personalizarla a tu gusto.
Guarda los cambios en tu plantilla.

Listo, cuando queramos enmarcar un código en una entrada, nos situaremos en la pestaña de edición de HTML y colocaremos el codigo así:
<pre><code> aquí el código que quieras enmarcar </code></pre>
Y eso es todo, solo falta que funcione.