Mostrar código puro en las entradas de Blogger (HTML, CSS y más)

Mostrar código puro blogger imagen

➕ Tabla de contenidos


¿Te estas partiendo la cabeza? para saber ¿Como mostrar código puro como HTML CSS PHP y mucho más en las entradas de blogger?. No te preocupes más aquí te enseño como lo puedes hacer en 3 sencillos pasos.

Hace un mes comencé este blog con el fin de compartir mis experiencias en la creación web en distintas plataformas. Opte por la plataforma blogger para demostrar el potencial que tiene, pero me tope con la increíble sorpresa de que no tenia idea de como mostrar código HTML puro para los tutoriales que pensaba publicar.

Literal me partí la cabeza agregando código a la plantilla por defecto de blogger para mostrar el dichoso código puro, hasta que lo logre y les comparto el método.

Tutorial para mostrar código puro en las entradas de Blogger

Primero comentar que este método me fascino por el sencillo hecho de que se mostrara siempre con el mismo aspecto sin importar la plantilla o theme que utilices y en el caso de que te cause problemas visuales es muy sencillo de editar.

PASO 1: Instala el siguiente código en tu plantilla 

Debes ir a Tema → Edición HTML y pegar el siguiente código antes de ]]></b:skin>

code {
 background:#EEEEEE; 
 font-family: Trebuchet MS; 
 display:block; 
 border:1px solid #999999; 
 padding:10px;
}

Puedes personalizar lo siguiente:

background: para el color de fondo que desees.
font-family: la fuente del texto a mostrar.

Aquí lo único que hemos hecho es agregar un shortcode de una caja para mostrar código.

PASO 2: Selecciona el código a mostrar y depuralo

Como ejemplo tomaremos tomaremos un extracto del código completo de la cabecera de mi web hiphopdeltrueno.com para mostrarlo en blogger.

Debemos ir a Blogcrowds.com o cualquier otra web que depure HTML copiamos y pegamos nuestro código como se muestra en la imagen y le damos al botón parse.

Parse código HTML, CSS, PHP y más ejemplo
Nos entregara un texto con varios símbolos que debemos guardar

. Nota: pega el código original en la segunda caja y dale parse si no te funciona en la primera.

PASO 3: Agregando el código puro en la entrada

En la Edición HTML de tu entrada agrega el shortcode <code> </code> como se muestra a continuación:

<code>aquí el código que guardamos en el paso 2
</code>

Nos debe quedar así tal como se muestra en la imagen del principio

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js" type="text/javascript" defer=""></script><script type="text/javascript" async="" src="https://www.gstatic.com/recaptcha/releases/Zy-zVXWdnDW6AUZkKlojAKGe/recaptcha__es_419.js"></script><script src="https://www.googletagservices.com/activeview/js/current/osd.js?cb=%2Fr20100101"></script>

Conclusión

Me ha encantado este formato ya que es sencillo y no utiliza scripts, tampoco carga nada ajeno a tu blog, es decir, es rápido ¡Solo es TEXTO! y eso le encanta a google y podrás mostrar lo que quieras en esta caja.

Existen otros métodos que consumen más recursos, pero son más "estéticos", mientras me quedo con este ya que es practico para mis fines.

Si desean que explique otros métodos dejen sus comentarios, compartan y por supuesto no olviden suscribirse al blog.

Comentarios

Estas cordialmente invitado a compartir tu ideas y comentarios.