Widgets de “texto”: insertar código HTML, imágenes o texto en la barra lateral

Como ya hemos visto, la instalación de widgets en la barra lateral del blog de WordPress.com es una opción muy interesante para acceder con rapidez a determinadas funciones.

Son muchos los sitios de Internet que ofrecen sus códigos para que puedan usarse en la barra lateral. En este artículo nos vamos a referir al widget Texto, uno de los más utilizados, con el que podremos agregar cualquier tipo de Texto, código HTML o JavaScript e incluso insertar Imágenes.

Su instalación es similar a la de cualquier otro widget. No hay más que arrastrarlo con el ratón hasta la barra lateral, soltar el botón izquierdo y en ese momento queda ya instalado. A continuación, se le da un título si se cree conveniente, se incluye el texto, código html o imagen que se quiere insertar, clic en “Guardar”, y la instalación queda completa. Para eliminarlo se hace la operación inversa, arrastrándolo desde la barra lateral a su ubicación original o bien haciendo clic en su opción “Borrar”. Algunas plantillas vienen ya con algunos widgets instalados de origen. Es muy importante recordar que los widgets configurados por defecto pueden desaparecer al añadir uno nuevo, siendo preciso instalarlos otra vez de forma individual si se quieren mantener.

En lo relativo a las etiquetas HTML decir que en el blog de WordPress.com solo están permitidas las siguientes: address, a, abbr, acronym, area, b, big, blockquote, br, caption, cite, class, code, col, del, dd, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, li, map, ol, p, pre, q, s, span, strike, strong, sub, sup, table, tbody, td, tfoot, tr, tt, ul, var

Veamos varios ejemplos de funcionamiento del widget Texto:

a) Insertar Texto

Ejemplo de insertar texto en la barra lateral con el widget Texto

Para separar los párrafos se debe acompañar cada uno de ellos de las etiquetas <p> y </p> en su inicio y final. De no hacerlo se verían “pegados” unos a otros.

b) Insertar código HTML
Si las direcciones Web queremos que aparezcan, por ejemplo, en forma de “lista” hay que hacer dos cosas:

– Las listas no ordenadas se etiquetarán con <ul> (al inicio de la primera lista) y </ul> (al final de la última lista) o con <ol> y </ol> en el caso de listas ordenadas.

– Idem. cada uno de los elementos de la lista con <li> al inicio y </li> al cierre.

Ejemplo de insertar código HTML o direcciones Web en la barra lateral con el widget Texto

En el ejemplo hemos creado un acceso directo a nuestras cuentas de Twitter y Facebook. Se puede hacer para cualquier dirección Web e incluso hasta es posible colocar banners publicitarios. En el caso de Twitter se dispone también de otras opciones (ver aquí).

c) Insertar imagen
Otra opción, derivada de la anterior, consiste en insertar una imagen en la barra lateral escribiendo su código html.

Por ejemplo si deseamos que la portada del libro del artículo de nuestro blog La Catedral del Mar. Ildefonso Falcones esté de forma permanente en la barra lateral solo tenemos que escribir la dirección Web o código html de la imagen según se indica a continuación y quedaría insertada.

<img src="https://eltrasterodepalacio.files.wordpress.com/2011/04/la-catedral-del-mar-011.jpg" title="nombre" />
(Donde “nombre” es el texto que aparecería si la imagen no se puede visualizar)

Ejemplo de insertar una imagen en la barra lateral con el widget Texto

d) Acceso directo a una Web mediante una imagen
Se trata de una variante de b) y c). Consiste en acceder a una Web haciendo clic sobre una imagen o logotipo.

Imaginemos que queremos acceder a la página Web de la Universidad Laboral de Córdoba (http://www.laboraldecordoba.es/home.htm) a través de una imagen representativa como la indicada en mi blog (https://eltrasterodepalacio.files.wordpress.com/2010/05/vista-general-libro-recuerdos-de-la-uni-4-041.jpg). Para ello no tenemos más que trasladar las direcciones indicadas a la fórmula siguiente:

Ejemplo de insertar una imagen como acceso directo a una Web con el widget Texto

Lógicamente el tamaño de la imagen resultante se puede redimensionar para adaptarlo a nuestro gusto y a las posibilidades de la barra lateral, pero este tema lo trataremos en un próximo artículo.

Y una recomendación final sobre la que siempre conviene insistir: no es aconsejable llenar de widgets nuestro blog si van a tener poco uso. Además de sobrecargar el escritorio con widgets innecesarios la navegación se puede hacer más lenta.

29 respuestas a Widgets de “texto”: insertar código HTML, imágenes o texto en la barra lateral

  1. Lolo dice:

    Buenas noches.
    Estoy aprendiendo a manejar el wordpress. He incorporado alguna de los widgets que están explicados ahí, pero tengo una duda:
    ¿Cómo se pueden incorporar imágenes en la barra lateral de dentro de los posts?
    Lo que explicas ahí es siempre en la “portada” de la web. Me gustaría saber cómo se hace para poner una imagen en la barra lateral de los posts.
    Gracias

    • eltrasterodepalacio dice:

      Hola:
      No entiendo muy bien a que te refieres con la frase “¿Cómo se pueden incorporar imágenes en la barra lateral de dentro de los posts?”
      Lo que se entiende por barra lateral solo existe una y es independiente de cada post. Está situada en la parte derecha del blog y en mi caso contiene los widgets: Categorías, Vodpod, Twitter-Facebook, ….. También puedes incorporar otro tipo de widgets como: Imágenes, Texto, Enlaces, RSS, etc. hasta más de 30 posibilidades distintas.
      Si me lo explicas con un ejemplo quizás te podría ayudar.

      • Lolo dice:

        Bueno, tratare de explicarme mejor en esta ocasion a ver si me pudieras echar una mano (no soy informatico, por eso desconozco algunos terminos y puede que los confunda)

        Te envio dos links de un periodico digital hecho con wordpress.

        El primero es la portada del diario en la que nos encontramos con tres columnas. La barra de la derecha creo que se llama sidebar. Es la que esta encabezada por el reproductor de videos.

        El segundo es el iinterior de una de las noticias. Cuando pinchas en la noticia en la portada te reconduce al interior del “post” en otra página. Bueno, la noticia en si cuenta con el texto y con una especia de apartado separado a la derecha. Ese apartado esta encabezado con “lo ultimo, lo mas leido, lo mas comentado”. Es esa la parte a la que se referia mi pregunta, Yo pensaba que esa barra lateral de dentro de los posts se llamab asi.

        Espero haberme hecho entender un poco mejor en esta ocasion

        Gracias por la respuesta
        Un saludo

        http://www.hoy.com.ec/

        http://www.hoy.com.ec/noticias-ecuador/en-pais-reina-la-confusion-dice-cesar-rodriguez-490444.html

  2. eltrasterodepalacio dice:

    Con el ejemplo que has puesto te he entendido perfectamente.

    En una instalación personalizada de WordPress, en tu propio servidor tienes más control para hacer modificaciones en la línea que planteas, pero en el caso de mi blog, que lo tengo en
    Wordpress.com, que ofrece la instalación ya hecha y el servidor o alojamientos gratuitos, estás mucho más limitado. Al menos, en varios, no todos, de los diseños o portadas que he analizado no es posible realizar lo que propones.

    Resumiendo: ¿Es posible diseñar tu blog en la línea que dices?
    a) En WordPress: Seguramente SI. Depende de la capacidad de tu diseño para admitir esas modificaciones.
    b) En Wordpres.com: Probablemente NO. En las portadas (Themes) que he visto no existe esa posibilidad.

    Saludos

  3. Volamben dice:

    Hola:

    Soy otro principiante en estos temas. Me ha ayudado mucho tu explicación a la hora de introducir enlaces a otras páginas, muchas gracias. Pero tengo un problema, sobre todo a la hora de introducir un código .html generado por una página web, que quiero introducir en la sidebar del blog, y al copiarla y pegarla, y darle a guardar, el wordpress la reduce, como si el lenguaje estuviese erróneo, por lo que no sale luego lo que quiero que se vea en el sidebar. Te adjunto el texto que quiero introducir, para que me orientes cómo debo cambiarlo para que se pueda visualizar en el blog. Un saludo. Javi.

    Éste es el texto que quiero incluir:

    …y esto es lo que deja luego WordPress después de pulsar “Guardar”, con lo que no se puede incrustar y no aparece nada en el sidebar del blog:

    …es como si se comiese gran parte del mensaje, y no sé a qué se debe. Te agradecería que me ayudaras. Gracias.

    • eltrasterodepalacio dice:

      Entiendo tu pregunta pero no se a que textos te refieres. Tanto el que quieres incluir como el que WordPress.com deja después de hacer clic en “Guardar”.

  4. Volamben dice:

    Hola de nuevo:

    Mirando en el foro de WordPress me he enterado de que la etiqueta script no está permitida, por lo que ya entiendo el problema. Ahora mi pregunta es:
    ¿Se puede sustituir esa etiqueta por otra parecida, o tendré que buscar otra página web que me dé el servicio que quiero instalar en el sidebar, y que no contenga este tipo de etiquetas prohibidas?Gracias. Un saludo.

    • eltrasterodepalacio dice:

      Como dices muy bien, el código JavaScript, no está permitido en WordPress.com. Lo borra automáticamente por razones de seguridad. La lista de las etiquetas permitidas la puedes ver en la documentación del soporte oficial: http://en.support.wordpress.com/code/#html-tags
      También hay algún ejemplo de aquellas no admitidas.
      Dependiendo de su posible utilización puede haber alguna alternativa distinta que funcione. Por ejemplo, los álbumes Picasa la tienen. Twiter antes también la tenía, aunque ahora ya no al haber cambiado a código “script”.

  5. augustob100 dice:

    Por más que coloco el ccódigo html, no se visualiza el widgets….solo se muestra el link. Podría ayudarme a solucionarlo, grx.-

    • eltrasterodepalacio dice:

      Para poder contestar necesitaría primero saber si lo que se quiere insertar en la barra lateral es código HTML (por ejemplo, las referencias a Twitter y Facebook que tengo en mi blog), imágenes o sólamente texto.

      • augustob100 dice:

        Es código HTML, un gadgets para indicar el clima de mi provinicia y tb quería insertar un contador de visitas por lugares del mundo. Gracias por tu ayuda.

      • eltrasterodepalacio dice:

        En cuanto al contador de visitas, al ser WordPress.com un blog gratuito sus prestaciones son bastante limitadas. En las siguientes direcciones podrás ver algo de información al respecto:
        http://es.forums.wordpress.com/topic/contador-de-visitas-9?replies=3
        http://es.forums.wordpress.com/topic/anadir-cosas-al-blog?replies=7
        Saludos

      • augustob100 dice:

        Muchas Gracias amigo, tus ayudas me fueron de mucha utilidad.

      • eltrasterodepalacio dice:

        El mejor ejemplo explicativo lo tienes en el propio artículo del blog. Si haces clic en la figura del apartado b) podrás ver ampliada la fórmula que he utilizado para insertar código html como widget de texto y tener acceso directo a Twitter. En tu caso, lo único que tendrías que hacer sería cambiar la dirección Web que figura por la del clima de tu provincia, y lo mismo con el nombre de Twitter y sustituirlo por el que desees.
        Las términos ul y li se pueden eliminar si se quiere. Solo tienen influencia en la manera de presentar el widget, así como otros que he añadido y que no figuran en el ejemplo.

  6. Hola buen dia, oye tengo una consulta, estoy en la creacion de mi web, y lo que deseo es hacer que mis visitantes descarguen un archivo(libro pdf) por medio de suscribirse en en mi lista de contactos de mailchimp, como pudiera hacer esta union, gracias de antemano

    • eltrasterodepalacio dice:

      Tu pregunta es clara, pero como parece que solicitas un método aunque sea genérico, te diré que el blog de WordPress.com (gratuito) no dispone de widget para instalar Mailchimp (también gratuito hasta un cierto límite). De ahí que no te pueda contestar con un ejemplo práctico sobre como descargar un archivo pdf a la suscripción de tu lista de contactos. Esta posibilidad existe para otro tipo de blog de WordPress (no gratuito) perteneciente a WordPress.org, distinto de WordPress.com.

      Para tu caso concreto (página Web), en Youtube existen diversos tutoriales con una explicación muy completa, y ejemplos, sobre las diversas aplicaciones de Mailchimp (http://www.youtube.com/watch?v=Rx8Y22hieIA).

  7. elenacharameli dice:

    Holaa! enhorabuena por el post. Me ha parecido una entrada muy útil, gracias por compartir estos consejos, intentaré ponerlos en práctica desde ya mismo y tener las imágenes bien presentadas. Lo recomendaré en mi curso de WordPress, nunca se deja de aprender un saludo! aulacm

  8. psoebarajas dice:

    Hola, estoy haciendo un blog y he metido un widgets para twiter. Todo ha salido muy bien, pero cuando lo intento para Facebook no sale nada. He intentado con otros perfiles de facebokk y tampoco. Después he probado con una página al azar de Facebook y si me ha dejado. Esto quiere decir que con perfiles no se puede y con páginas si?
    Gracias de antemano.

    • eltrasterodepalacio dice:

      No tiene por que. En el caso de mi blog está referenciado a un perfil.

      • psoebarajas dice:

        Si, ya lo he visto y el enlace también lo puedo poner y funciona. Me refiero a que salga el muro y las caras a de los seguidores. En twiter si se puede, pero con Facebook no.

      • eltrasterodepalacio dice:

        La widgets disponibles en un blog de WordPress.com dependen de la plantilla elegida.
        Es muy posible que te ocurra lo que a algunas plantillas con “Facebook Like Box”: solo funcionan para páginas y no para perfiles personales.
        Lo tendrás que comprobar en tu propio blog (Apariencia > Widgets). En mi caso, por ejemplo, Twitter dispone de “Display an official Twitter” y “Embedded Timeline widget”, mientras que Facebook solo tiene “Me gusta” para conectar a los visitantes. Si bien, a veces, es posible sortear estos obstáculos apoyándose en otros widgets auxiliares.

  9. psoebarajas dice:

    Cuando hablo de los widgets de twiter y facebook, me refiero a que salgan las caras de amigos, el timeline, etc.

  10. cardeliri dice:

    Hola, tengo una duda, por que cada vez que intento poder un widget en “texto” a la hora de guardar se me vuelve a poner en blanco? Eso quiere decir que no puedo poner widgets en html? gracias.

    • eltrasterodepalacio dice:

      No hay ninguna razón aparente para que no puedas agregar (en la barra lateral) en forma de “texto” un “código html”. Si sigues las instrucciones citadas en el artículo (apartado b) no debieras tener problema al hacer clic en “Guardar” (último paso). Así están ejecutados mis enlaces a Twitter y Facebook.
      Supongo que te estarás refiriendo a un widget de este tipo.

      • cardeliri dice:

        Gracias por tu respuesta pero no me refería a el widget de facebook o twiter que ya vienen para que los selecciones y modifiques, dentro de esos widgets, (face, twiter, instagram etc) viene uno llamado “texto” que te da la opción de poner título y poner el texto en HTML (como por ejemplo el widget de un botón de sígueme en Lookbook, un sitio donde tengo otro perfil) donde ellos me dan a mi el cógido HTLM yo intento insertarlo en el widget “texto” y al guardar se me queda de nuevo en blanco,

        gracias

      • eltrasterodepalacio dice:

        Al hablar de mis widgets Facebook y Twitter quería referirme a que los tengo instalados como widgets de “Texto”, tal y como tu quieres hacer con Lookbook. Es decir, un texto y un código html que es el que interactúa. Los que trae instalados por defecto la plantilla de WordPress no los he utilizado hasta ahora.
        Desconozco la razón por la que no puedes hacer lo mismo en tu caso.

  11. cardeliri dice:

    Si, justamente como lo que tienes explicado arriba apartado b, lo intenté muchas veces y nada, quizás esté haciendo algo mal. Gracias

  12. lugm98 dice:

    Hola buenas noches, soy estudiante y soy principiante en wordpress
    Pues quería agregar un texto html con una mascota virtual pero al momento de querer guardarlo me borra todo automaticamente y al actualizarlo solo me sale el URL
    ¿A qué se deberá eso?
    Saludos

    • eltrasterodepalacio dice:

      Hola:
      Supongo que cuando hablas de agregar una mascota virtual te refieres solamente a insertar una imagen en la barra lateral mediante su código html. No debieras tener ningún problema si sigues lo indicado en el apartado c).
      Ahora bien si lo que deseas es acceder a una dirección Web haciendo clic sobre una imagen (mascota virtual), en ese caso deberías seguir lo reflejado en el apartado d). Tampoco deberías tener problemas. Mis enlaces a Twitter y Facebook están ejecutados mediante esta técnica (widget de texto).

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: