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

Comentarios

  1. 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!!

    ResponderEliminar
  2. 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!

    ResponderEliminar
  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

    ResponderEliminar
  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

    ResponderEliminar
  5. Hola,soy el Canario.la verdad es que me gusto,y estoy aprendiendo algo de"HTML" y lo que buscaba era poder escribir en mis post los códigos para ofrecer celos a mis lectores,lo e utilizado y va genial,gracias y te puse un enlace por si algún visitante quiere mejorar su rapidez de carga y su seo, sabrías decirme como poner en los post los códigos de html como esto:no es un código html head doctypehtml html p title Gracias title p html y no le pongo etiquetas si no no me deja publicarlo como puedo copiar códigos así en mis post y que los vean,da igual no se ve el código,no se el por que? mis visitantes, graciñas desde Galicia.

    ResponderEliminar
    Respuestas
    1. Hola el canario, es mas fácil de lo que crees, mira tu puedes escribir el código html que tu quieras, pero recuerda marcar en la Opciones "Mostrar HTML literalmente " , se mostrará sin ningún problema . Muchas gracias por citar nuestra pagina. Un saludo

      Eliminar
  6. Great post. I was checking continuously this blog and I am impressed! Extremely helpful info specially the last part :) I care for such info much. I was looking for this particular information for a long time. Thank you and best of luck.
    SEO Content Writer

    ResponderEliminar

Publicar un comentario

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Entradas populares de este blog

5 alternativas open source a Loquendo

Que es microsoft silverlight