Para poner en el blog los codigos en cajas de texto, aunque también puede funcionar con las etiquetas <quote></quote> les presento este otro modo.
Lo descubrí navegando por varios blogs, pero no recuerdo en cual, por lo tanto esta vez no podré recomendarselo, si el autor lo reconoce, que deje un comentario :)
Así quedaría una vez que introduzcan las etiquetas
<pre><code></code></pre>
Hola ^_^ Ahora, el código que se necesita para ese 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 */
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
}
Para modificar la apariencia, simplemente tenés que cambiar algunos Colores HEX, también podés cambiar la Imagen que dice "Código" cambiando la URL de la misma por la que más te convenga.
Seguir Leyendo...[+/-]
