Como crear un "Cuadro" donde meter código

El código que se necesita para este 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
}

Si se quiere modificar la apariencia, simplemente tienes que cambiar algunos Colores HEX. Si quieres cambiar la Imagen que dice "Código" puedes hacerlo cambiando la dirección de la Imagen, se encuentra dentro de url( ) .

Ahora, una vez introducido este código en tu Blogger, solo tienes que poner en tus post las etiquetas <pre><code> y </code></pre> para que funcione.

Todo lo que pongas entre las etiquetas estará dentro del "cuadro de código".

Vía | Trucosblogger