Insertar un cuadro de código fuente en Blogger

Vía Trucos Blogger encontramos este muy buen tutorial sobre como poder insertar un cuadro o casilla, en la cual mostrar directamente código fuente. En síntesis, algo como esto:
Nuestro código estará aquí 
1. Para implementarlo en nuestra cuenta de Blogger seleccionamos Diseño>>Edición de HTML, luego expandimos plantilla de artilugios marcando la casilla y con CTRL+ F buscamos:



2. Copiamos el siguiente código:
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:#ffffff; /* 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:#ffffff; /* Color de Fondo en Hex */
   border:1px solid #ffd511;/* Color de Borde en Hex */le
}
3. Pegamos el código anterior justo antes de ]]></b:skin> y revisamos que nuestra plantilla este funcionando correctamente, luego guardamos.

4. Ahora ¿Como lo integramos en nuestra entrada?, para esto, deben insertar su código (en Edición HTML) entre las siguientes etiquetas:
<pre><code>Su código debe ir aquí</code></pre>
5. De esta forma su Blog queda en las condiciones de presentar código fuente en las publicaciones. Opcionalmente podemos acceder a modificar la apariencia, editando la combinacion de color hexadecimal o la imagen que dice "Código" reemplazando la URL.

3 comentarios:

20 de mayo de 2011, 10:28 CM dijo...

Mil gracias hermano, se lo agradesco. Muy buena modificación para blogger

18 de junio de 2011, 14:19 Alejandro Farré García dijo...

Pues a mi sigue sin escribirme el código fuente dentro...

16 de diciembre de 2012, 7:40 Unknown dijo...

Muchas Gracias compañero!

Publicar un comentario