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
Leer el resto de esta entrada »
