¡Hola! Soy Cristian González
Content Creator y Web Designer

Ubicación

Buenos Aires, Argentina

Envíame un mensaje

Formulario de contacto

Name

Correo electrónico

Mensaje

Video

Mostrar código fuente en las entradas de Blogger

Códigos HTML y CSS
Truco simple de realizar. Hoy te enseñaré cómo mostrar el código fuente en una entrada de Blogger. Es muy sencillo y tenes los ejemplos funcionando en este mismo post. Ideal si queres hacer tutoriales sobre programación o diseño web.

PD: me encontré con muchos sitios que explican cómo colocar el CSS y HTML correspondiente, pero que omiten un código vital para inhabilitar el funcionamiento de los scripts y sin el cual la siguiente explicación perdería sentido.

Para empezar hacé clic en Plantilla y luego en Editar HTML. Una vez ahí, se abrirá una ventana con el código de todo tu blog, hacé clic sobre la misma y seguido de ello Ctrl + F. Aparecerá un buscador, en el escribe ]]> todo lo que se encuentre arriba de este código es el CSS del blog, y es donde debes colocar lo siguiente:

/* CODIGO
------------------------------------------------------------------------------------- */
pre {
padding-top:20px; /* Relleno - para ajustar Fondo */
}
pre code {
overflow:auto;
background: #F4D3B0;
border: 0px solid rgb(204, 204, 204);
color:#7f7f7f;
font-size:12px;
display:block;
max-height:350px; /* No tocar */
padding:5px; 
white-space:pre; /* No tocar */
text-align:left;
min-height:43px;
width:98%;
}
code:hover { /* Cuando pasa el cursor */
background: #F4D3B0;
}
pre.html { /* Código para HTML */
background:#F6E3CE url(http://3.bp.blogspot.com/-PTHdhZFySHM/VMpCA3YRI4I/AAAAAAAAAtM/6LaUwcqkhfk/s1600/HTML.png) no-repeat scroll left top;
}
pre.css { /* Código para CSS */
background:#F6E3CE url(http://2.bp.blogspot.com/-VDTQD4Y2-k8/VMpC3bsPShI/AAAAAAAAAtc/ve-bgDNQofI/s1600/CSS.png) no-repeat scroll left top;
}
pre.js { /* Código para JavaScript */
background:#F6E3CE url(http://1.bp.blogspot.com/-qw0usG-P46M/VMo-c1t_noI/AAAAAAAAAs4/8OCug1IrlmM/s1600/JAVASCRIPT.png) no-repeat scroll left top;
}
Una vez hecho esto guardas y ya tenes todo el diseño del cuadro en el que mostrarás los códigos, después es cuestión de que te pongas a jugar con el CSS, hasta encontrar el estilo deseado.

Ahora, lo que faltaría es hacer que funcione, emplearlo en tus posts, para ello dirígete a una entrada, y en el apartado HTML coloca lo siguiente:

<pre class="css"><code>
Aquí el código que quiero mostrar de CSS.
</code></pre>

<pre class="html"><code>
Aquí el código que quiero mostrar de HTML.>
</code></pre>

<pre class="js"><code>
Aquí el código que quiero mostrar de JavaScript.
</code></pre>
Unas líneas más arriba te hablaba sobre un código vital, bueno, ese “código vital” no afecta al CSS, pero si al HTML y al JavaScript. Si yo deseo mostrar en mis entradas estos últimos dos lenguajes, es necesario inhabilitar su función, de lo contrario Blogger los leerá, activará y no podré verlos. Para evitar que Blogger los active debes reemplazar todos los "<" y los ">" por lo siguiente:

Códigos HTML y CSS

1 comentario

Con tecnología de Blogger.