Cuadro Para Poner Codigos Html

Cuadro para Codigos Html

-como crear un "cuadro" en el cual poner un código html:

-El código que se necesita para ese efecto es el siguiente: Primero vamos a Edición HTML (Plantilla)y agrega el código antes de ]]></b:skin>

CODIGO
pre {

     background:transparent url(http://img509.imageshack.us/img509/3046/codema7.png) no-repeat 0 0; /* Imagen Superior, si desas cambiarla modifica lo que se encuentra dentro de url(AQUI) */

     padding-top:24px; /* Relleno - para ajustar Fondo */

}

pre code {

     overflow:auto; /* Determina si es necesario agregar barras de Scroll */

     background-color:#fffbe5; /* Color de Fondo en Hex */

     border:1px solid #fff1a3; /* Color de Borde en Hex */   color:#7e1f09; /* Color de letra en Hex */      display:block; /* No tocar */   padding:5px; /* Relleno del cuadro */

     white-space:pre; /* No tocar */

     text-align:left; /* Alineacion del Texto , left=izquierda, center= centrado, right=derecha */su

     min-height:63px; /* Altura minima del Cuadro */}

/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */

code:hover {

     background-color:#FEFEDD; /* Color de Fondo en Hex */   border:1px solid #ffd511;/* Color de Borde en Hex */le

}

por ultimo en cada entra de su blog que quieran poner un codigo como ejemplo debe estar entre estas etiquetas:

<pre><code>AQUI VA EL CODIGO QUE QUIERAN PONER</code></pre>