crear un cuadro de codigo

Les enseñare como crear un "cuadro" en el cual pueden añadir código, aunque igual puede funcionar con hasta con las etiquetas ahora, veamos un ejemplo de lo que podrán obtener si modifican el código de acuerdo a sus necesidades.

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

Ahora, el código que se necesita para ese efecto es el siguiente:Para agregar este código a Blogger, simplemente ve Diseño de plantilla >> Edicion HTML y busca ]]></b:skin>, buscalo con Ctrl + F y agrega el código antes de la sentencia indicada.

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, si desean modificar la apariencia, simplemente tienen que cambiar algunos Colores HEX. Si quieren cambiar la Imagen que dice "Código" pueden hacerlo cambiando la dirección de la Imagen, se encuentra dentro de url( ) .

Ahora si puedes crear una nueva entrada o post como le llames alli escribe normal y cuando desees añadir el codigo html primero conviertelo de html a texto plano para que no se interprete como orden sino como texto aqui te dejo una direccioón.

http://blogcrowds.com/resources/parse_html.php

Escribe tu html normal y presiona parse en la parte inferior del cuadro.Una vez convertido tu codigo html a texto plano te vas al post y en edicion de html coloca primero las etiquetas pre y code.

<pre><code></code></pre>

y al centro de estas coloca el html converido a texto plano y listo publica y prueba, mas explicado no puede estar.

Espero te Sirva para que personalizes tu Blog.