A petición de Miguel Angel de invernegocio voy a explicaros la forma de crear una caja contenedora para poder mostrar nuestros códigos html.
El truco que voy a explicaros lo vi en el blog de Gema y lo haremos agregando estilos CSS a nuestra plantilla, podremos modificar a nuestro gusto los siguientes datos:
background, color, margin, padding etc.
Una vez hemos personalizado nuestro código base, accedemos a Edición Html de nuestra plantilla y sin necesidad de expandir artilugios lo pegaremos antes de ]]></b:skin> :
Una vez hemos personalizado nuestro código base, accedemos a Edición Html de nuestra plantilla y sin necesidad de expandir artilugios lo pegaremos antes de ]]></b:skin> :
/* Caja de código */
pre {
padding-top:22px; /* Relleno - para ajustar Fondo */
}
pre code {
overflow:auto; /* Determina si es necesario agregar barras de Scroll */
background-color: #efffdf; /*
Color de Fondo en Hex */border:1px solid #999999; /*
Color de Borde en Hex */color:#333333; /*
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: #CAF99B; /*
Color de Fondo en Hex */
border:1px solid #0066cc;/*
Color de Borde en Hex */le}/*
FIN Caja de código */
pre {
padding-top:22px; /* Relleno - para ajustar Fondo */
}
pre code {
overflow:auto; /* Determina si es necesario agregar barras de Scroll */
background-color: #efffdf; /*
Color de Fondo en Hex */border:1px solid #999999; /*
Color de Borde en Hex */color:#333333; /*
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: #CAF99B; /*
Color de Fondo en Hex */
border:1px solid #0066cc;/*
Color de Borde en Hex */le}/*
FIN Caja de código */
Una vez agregado el código a nuestra plantilla guardamos los cambios y listos.
Si queremos que cada vez que nos interese mostra un código aparezca nuestra caja, lo haremos de la siguiente forma:
Al inicio de nuestro código pondremos las etiquetas <pre><code>Aquí el Código</code></pre>.
Si queremos que aparezca automaticamente en nuestra plantilla accederemos a: Configuración/Formato/Plantilla de entrada donde añadiremos <pre><code></code></pre> y guardaremos los cambios efectuados.
El resultado final seria como el que os muestro en este post, pero con colores distintos.
Espero sea de vuestra utilidad.
