Muchos blogs suelen incluir código para ayudarnos a llevar a cabo ciertos “hacks” en blogger y seguro que en más de un blog habrás visto que el código que nos muestran, esta dentro de un determinado cuadro. La forma de hacer esto si quieres mostrar en tu blog el código a tu manera es bastante sencilla:
Antes que nada, debemos personalizar la caja contenedora, asignarles unos valores de background, color, marging, padding, etc.. Pero si no sabes de lo que te estoy hablando, no te preocupes, solo tienes que copiar el siguiente código antes de ]]></b:skin>.
/* Caja de código */pre {background:transparent url(URL DE LA IMÁGEN) 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; /* Alineación del Texto , left=izquierda, center= centrado, right=derecha */sumin-height:63px; /* Altura mínima 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 */
Donde dice, URL DE LA IMÁGEN, debemos añadir la dirección donde tenemos hospedada la imágen a mostrar, por ejemplo como la que puedes ver en el recuadro con la palabra “código”. Puedes editar el código a tu antojo y en concordancia con tu blog, pudiendo cambiar todos aquellos parámetros para que la caja se ajuste a cada post. Si, quieres añadir un fondo de imagen al código, solo tienes que argumentar la línea “background-color:#E9E9E9; /* Color de Fondo en Hex */ “, para ello puedes mover el “/*” y llevarlo al principio de la misma, quedando esta de la siguiente forma: /*background-color:#E9E9E9; Color de Fondo en Hex */ , luego debes añadir background:transparent url(URL DE LA IMÁGEN) no-repeat 0 0; indicando la dirección donde has hospedado la imagen para el fondo del bloque.
Cuando hayas guardado los cambios, y para hacer que el cuadro sea visible solo debemos introducir el código entre las etiquetas <pre><code></code></pre> de la siguiente forma: <pre><code>aquí irá el código</code></pre>
Comentarios Recientes