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

    CURSOS ONLINE DE MARKETING DIGITAL

    Unite a los alumnos que ya consiguieron vender m谩s con mis formaciones y a los que acompa帽o d铆a a d铆a.

    UBICACI脫N

    Buenos Aires, Argentina

    EMAIL

    gonzalezcristiangabriel@gmail.com

    SITIO WEB

    www.gonzalezcristian.com.ar