Trucos Blogger - Caja para mostrar codigo en las entradas

Me preguntan la forma de crear la caja donde suelo mostrar los códigos y ahí va la respuesta. Para hacerlo agregaremos estilos CSS donde personalizaremos la caja, es decir background, color, margin, padding etc. Lo podemos hacer agregando las propiedades en la plantilla, antes de ]]>/b:skin y el código a añadir es el siguiente:

/* Caja de código */
pre {background:transparent url(aquí la url de una imagen) no-repeat 0 0;
/* Imagen Superior, si deseas cambiarla modifica lo que se encuentra dentro de url(AQUI) */padding-top:22px; /* Relleno - para ajustar Fondo */
}pre code {overflow:auto;
/* Determina si es necesario agregar barras de Scroll
*/background-color:#E9E9E9; /* Color de Fondo en Hex
*/border:1px solid #999999; /* Color de Borde en Hex
*/color:#990000; /* Color de letra en Hex
*/display:block; /* No tocar */padding:8px; /
* Relleno del cuadro */white-space:pre;
/* No tocar */text-align:left; /* Alineacion del Texto , left=izquierda, center= centrado, right=derecha */sumin-height:63px; /* Altura minima del Cuadro */}
/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */code:hover {background-color:##ffffff; /* Color de Fondo en Hex */border:1px solid ##666666;/* Color de Borde en Hex */le}/* FIN Caja de código */

Si preferimos no añadir imagen bastará con suprimir el texto entre paréntesis. El resto de los valores los podemos adecuar al tamaño según la media que deseamos para nuestra caja así como el lugar donde la añadiremos y los colores para personalizarla.

Una vez guardados los cambios nos situamos en la plantilla de entrada:Configuración/Formato/Plantilla de entrada donde
añadiremos <pre><code></code></pre> y guardamos los cambios nuevamente.

Con este último paso lo que conseguimos es que al editar una entrada nos aparezcan automáticamente las etiquetas <pre><code></code></pre>evitándonos tener que copiar y pegar cada vez que vamos a necesitarla. Si no la necesitamos no es problema, la suprimimos de la entrada y listo.

Cuando tengamos que mostrar un código añadiremos dicho código dentro de las etiquetas, es decir: <pre><code>aquí el código</code></pre>
El resultado será más o menos como la caja contenedora de código de esta entrada.