Cuadro de Codigo para tu Blog

Bueno, ahora a petición de un visitante de nuestro Blog ( que nos contacto por medio de la Forma de Contacto ):

Nombre : esteban
E-Mail : oculto
Tema : caja de texto
Mensaje : una consulta para poner en mi blog unos codigos en una caja te texto asi como tienen ustedes que arriba dice codigo como tendria que hacer?

saludos..

Lles enseñare como crear un "cuadro" en el cual pueden meter código, aunque igual puede funcionar con hasta con las etiquetas <quote></quote> 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 a Edición HTML 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, si desean modificar la apariencia, simplemente tienen que cambiar algunos Colores HEX, pueden encontrar una paleta aquí. Si quieren cambiar la Imagen que dice "Código" pueden hacerlo cambiando la dirección de la Imagen, se encuentra dentro de url( ) .

Solo necesitan poner el siguiente código para que funcione: <pre><code></code></pre>

Technorati : CSS, Code, Cuadro de Código para tu Blog, Pre