Cuadro para Codigos Html

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

Esto es lo que verán una vez que introduzcan las etiquetas  <pre><code></code></pre>

-El código que se necesita para ese efecto es el siguiente:

Para agregar este código a Blogger, simplemente ve a Edición HTML (Plantilla)y agrega el código antes de ]]></b:skin>

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

}

Ahora solo queda poner el siguiente código para que funcione,en "creación de entradas" cada vez que queramos publicar un post e incluir este cuadro: <pre><code>></pre>

-Yo os aconsejo hacer una cosa "para tener siempre a mano ese código"...

-Vamos a "Configuración",seleccionamos "Formato",bajamos hacia abajo y vemos que pone "Plantilla de entrada"y "un cuadro"...hay "en el cuadro" introducimos el "ultimo código" y "guardamos conflagración"

-Así cuando queramos realizar una nueva entrada siempre nos aparecerán "las etiquetas" necesarias para "entre ellas" introducir un código y que nos salga como en este blog lo hacemos.