Como escribir codigo html en un articulo en blogger

Publicar un codigo HTML en un articulo o entrada en blogger puede llegar a ser un poco confuso, ya que de por si blogger no nos ofrece ningun elemento que se adapte a longitud del codigo o que destaque el codigo del texto del articulo.
Por eso escribo este articulo, me lleve dos dias buscando soluciones y al fin encontre una. Este metodo nos ofrece un cuadro de texto con barras de desplazamiento tanto horizontal como vertical, de esta manera podremos poner el codigo por mas largo de una manera liviana a la hora de la carga de la pagina, punto SEO muy importante .

  • Para poner un cuadro de texto copiamos el siguiente codigo.


<span id="fullpost"></span> <span id="fullpost"><div align="center"> <pre style="height: 200px; overflow: auto; width: 500px;"> <div align="left"> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="font-size: small;"> AQUI ESCRIBIMOS EL CODIGO A MOSTRAR </span></span></div> </pre> </div> </span>

  • Ya solo nos queda insertar el codigo a mostrar, sustituyendo lo escrito en azul .Y problema resuelto
De este modo tendremos bien estructurados nuestros articulo, bien claros y mas cortos, mejorando asi la expriencia de los usuarios en nuestro blog.

Conoces algun metodo mejor? compartelo con nosotros

4 comentarios

  1. te agradeceria mucho mas si pudieras decirme como le hago para cambiar la fuente del contenido de la caja de codigo y el color de fondo de esta… por favor. Saludos!

  2. TENGO PROBLEMAS, YA PUBLICADA LA ENTRADA SI ME MUESTRA ESE CUADRO DONDE APARECE MI CODIGO PERO LAS BARRAS DE DESPLAZAMIENTO NO RESPONDEN, NO FUNCIONAN… ¿A QUE SE DEBE ESTO? (COPIE EL CODIGO TAL CUAL COMO ARRIBA ESTA)… ESPERO QUE PUEDAS AYUDARME.

    MUCHAS GRACIAS DE ANTEMANO.
    MUY BUEN POST!!

  3. @Anibal Clavel

    Hola Anibal , antes que nada gracias por visitar mi blog.

    lo que tienes que hacer es , en el editor pulsar en edicion htlm , pegas el codigo que tienes arriba, y ya puedes escribir , las barras de desplazamiento aparecen perfectamente , lo acabo de probar, respeto a las propiedades de color y fondo , los puedes modificar con las opciones del editor, seleccionas el texto y le aplicas el color que quieras. Espero que te sirva

  4. @Anibal Clavel

    Hola Anibal , antes que nada gracias por visitar mi blog.

    lo que tienes que hacer es , en el editor pulsar en edicion htlm , pegas el codigo que tienes arriba, y ya puedes escribir , las barras de desplazamiento aparecen perfectamente , lo acabo de probar, respeto a las propiedades de color y fondo , los puedes modificar con las opciones del editor, seleccionas el texto y le aplicas el color que quieras. Espero que te sirva

Los comentarios están cerrados