Hace tiempo que quería explicar un post donde enseñaría como colocar simbolos HTML o de CSS en los blogs, en especial en los posts o las entradas de Blogger y hasta ahorita no me había dado un tiempo para hacerlo de la manera que quería, sin embargo hoy les enseñaré como hacerlo y espero que les sirva.


Lo primero que deben saber es que hay “símbolos” por defecto que el HTML reconoce como propios de su sintaxis. El blog se encuentra todo dentro de un conjunto de etiquetas de HTML llamados tags y que más o menos tienen la siguiente estructura:

<html>
<head><title>Título</title></head>
<body>
</body>
<html>

Lo anterior es sólo algo genérico y si no lo entendieron no importa para nada. En especial a lo que refiere a los símbolos mayor “>” y menor “<“ que resultan un problema al ser escritos en las entradas. Si es que intenta escribir por ejemplo </div> dentro de un post o entrada de Blogger (u otro intérprete de HTML en general), de inmediato el sistema lo detectará como una etiqueta del HTML llamada div (propia de este lenguaje), por ende, no saldrá como queremos que se muestre. Así que sólo nos valdremos de unos códigos que tiene el propio HTML para hacer esto posible.

He visto a muchos bloggers sufriendo y que incluso en sus comentarios deben usar códigos como éstos:

[body][/body]

para denotar:

<body></body>

Hasta aquí todo ha sido puro “cuento”, lamento haberlos hecho que lean ese pedazo de texto pero era ideal que tuvieran una introducción siquiera parcial de los problemas que existen al intentar mostrar códigos HTML dentro de un post.

Para mostrar etiquetas (tags) HTML dentro de un post sólo necesitamos algunos códigos. Por ejemplo:

Descripción Notación Código
Menor que < &lt;
Mayor que > &gt;
Ampersand & &amp;

Si desean por ejemplo escribir el tag <head> deben poner en su entrada &lt;head&gt; (en la pestaña de Edición de HTML, no en el de Redactar). Con eso basta, si desean más códigos pueden visitar cualquier tabla de códigos HTML (ver enlace al final o aquí) y usar su HTML número o HTML nombre. Recuerden que esto también funciona al momento de querer escribir códigos HTML en sus comentarios. Así que basta de usar corchetes para emular los “mayor que” y “menor que” del HTML y en caso tuvieran dudas, las espero con gusto.

Observación: En la vista previa los códigos HTML escritos seguirán mostrándose tal y como se escribieron, su cambio a < y > se mostrará recién al momento de publicar el artículo. Pueden ver más muestras de cómo los he usado en estos posts:

Cómo quitar la barra de Blogger,
Cómo agregar un traductor a tu blog de Blogger,
Cómo agregar un menú superior a tu blog de Blogger, etc.

Otro ejemplo de despedida, por ejemplo para mostrar la estructura de la web puesta al inicio el código que deberían usar sería:

&lt;html&gt;
&lt;head&gt;&lt;title&gt;Título&lt;title&gt;&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;html&gt;

Enlace: Códigos HTML

Comentarios ( 7 ) en: Poner codigo HTML en posts de Blogger
  • TIENSJAEN dijo:

    Chevere, útil y servicial, como siempre.

  • KnxDT dijo:

    Hola TiensJaen, un gusto tenerte comentando por aqui y me alegro que te sea de utilidad. 😉

  • Edgar Vivas dijo:

    Lo siento ahora si se entiende mi mensaje :p

    Hola.. yo tengo una duda a proposito d este tema. Hay paginas que por defecto al insertar un codigo html me convierten el < y > a esos codigos q mencionas (&lt y &gt) por lo cual solo me muestran el codigo mas no la aplicacion en html. Mi pregunta es como hago para q el codigo html se aplique???. Quiza alla una forma d q yo haga este metodo a la inversa??. Saludos

  • KnxDT dijo:

    Lo que pasa es que muchas de “esas” webs deshabilitan las funciones HTML (en los comentarios) a las que haces referencia para evitar inserción de código malicioso en sus webs como hotlinks con virus, frames, etc. 😕

  • Daniel dijo:

    Bien muchas gracias me sera de utilidad para los cursos que estoy dando en mi blog, evitara estar tomando capturas de pantalla.

    Muy buena la web.

    Saludos
    Daniel
    http://programador95.blogspot.com

  • Daniel dijo:

    Buenas noches, por favor eliminar mis comentarios de este articulo ya que al buscar mi nombre en Google aparece y quisiera no fuera asi (motivos laborales).

    Gracias.

  • Alex dijo:

    Grax me ayudo mucho en una tarea que tenia que realizar,,, grax de nuevo