• 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:

    INGRESO PARA ALUMNOS

    Accede al temario, cronograma y materiales de lectura de las diplomaturas y cursos que dicto de manera presencial y a distancia.

    UBICACIÓN

    Buenos Aires, Argentina

    EMAIL

    gonzalezcristiangabriel@gmail.com