Caja contenedora de código html

Cuando tienes un blog de diseño se te hace necesario no sólo utilizar sino también publicar códigos para que tus lectores los utilicen.

Estos códigos (código html) cambian cuando los editas desde el formato de entrada REDACTAR, por ello debes ubicarlos en un lugar especial para que al ser publicados no cambien y puedan ser útiles.

Muchas de las ocasiones en las cuales los trucos no resultan es porque quien te los pasó  lo hizo sin tener en cuenta esto, y por ello el mismo contiene errores.

En esta oportunidad te traigo una caja para encerrar los códigos de tal manera que los puedas usar fácilmente.

REPITO: es muy importante encerrarlos en su caja.

1 - Ingresa a la sección de la plantilla  y busca ]]></b:skin>

2 - Arriba pega el siguiente código

/* Caja de código */


pre {

background:transparent url(<b><span style="color: #351c75;">aquí la url de una imagen</span></b>) 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 */su

min-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 */

3 - Donde dice Aquí la URL de la imagen colocas la dirección de la imagen que quieras poner arriba de la caja. Si no deseas hacerlo para que no se te haga complicado, borra la frase que está destacada.

4 - Puedes modificarla según los valores que desees, ten en cuenta las explicaciones dentro del código.

5 - Vista previa.

6 - Guardar plantilla si todo está bien.

7 - Puedes agregar la caja en todas las entradas llendo a Configuración - Entradas y comentarios - Plantilla de entrada  y agregar allí lo siguiente: 

<pre><code> aqui el codigo</code></pre> 

8 - Guarda los cambios.

9 - Si lo prefieres puedes agregarlo manualmente en cada una de las entradas en las cuales lo necesites.

Fuente: Gema Blog