Agregar gadget Sígueme en redes sociales

Bueno si alguien no se entera con el título que he puesto, es normal, no sabía ni cómo titularlo jeje :)

En esta entrada lo que voy a explicar, dado que he tenido más de una petición sobre este tema, es cómo crear algo parecido a lo que podéis ver en el apartado Sígueme en / Follow me on en la barra lateral derecha de este blog.

Agregar gadget Sígueme en redes sociales

En primer lugar, accedemos a la ficha Diseño –> Elementos de la página de nuestro blog.

Pulsamos el enlace Añadir un gadget en la posición que queramos colocarlo y, en la pantalla que aparece, seleccionamos el que pone HTML/Javascript.

Agregar gadget Sígueme en redes sociales

A continuación, en la vista HTML de este gadget es donde tendremos que agregar el siguiente código HTML.

Antes de seguir, aclarar que la vista HTML del gadget es la siguiente.

Agregar gadget Sígueme en redes sociales

Una vez que estamos en la vista HTML, voy a explicar el código HTML que tendréis que aplicar.

La estructura de una tabla en código HTML es la siguiente.

<table>
     <tr>
          <td>
               {código HTML del contenido de la celda}
          </td>
          <td>
               {código HTML del contenido de la celda}
          </td>
          <td>
               {código HTML del contenido de la celda}
          </td>
          <td>
               {código HTML del contenido de la celda}
          </td>
     </tr>
</table>

Como podéis ver, la etiqueta TABLE indica que vamos a crear una tabla; la etiqueta TR indica la creación de una fila; y, por último, la etiqueta TD la creación de una columna.

La tabla anterior estaría formada por una fila y cuatro columnas que si os fijáis es lo que necesitamos para nuestro ejemplo.

Lo único que tendríais que modificar es el texto que pone {código HTML del contenido de la celda} por el código HTML de la imagen junto al hipervínculo al cual queréis que se acceda cuando se haga clic sobre la imagen.

Por si no queda claro este apartado, os escribo el código HTML del contenido de una celda.

<a href="dirección URL hipervínculo"><img src="dirección URL imagen" alt="texto descriptivo de la imagen"></a>

Si alguien tiene dudas sobre la dirección URL de la imagen, lo tenéis explicado en esta entrada anterior del blog.

20 comentarios:

Unknown dijo...

Muy útil la verdad! Y además creo que funciona muy bien! Jajaj, estoy contigo, es muy difícil titular un post así! Un saludo :)

José M. dijo...

Gracias Eva por tu comentario, saludos :)

Sofía Vitale dijo...

muy bueno, así queda más ordenado, sabes lo que me gustaría agregar a mi blog, es el botón para votar anotación en bitacoras, algo busqué en bitacoras.com pero no encontré ese, si puedes pásame el tip de cómo hacerlo, saludos y gracias

José M. dijo...

Gracias Sofía por tu comentario, en unos días publicaré una entrada para explicar cómo se agrega el botón de Votar de Bitacoras :)

Sofía Vitale dijo...

gracias, la verdad te felicito por tu blog, está buenísimo

José M. dijo...

Gracias :)

Sofía Vitale dijo...

gracias ya probé lo de los íconos de redes sociales y funciona muy bien, pero creo que falta un > al final de "texto descriptivo de la imagen", saludos

José M. dijo...

si, es verdad :)

Stuka dijo...

hola te queria decir qe no puedo copiar el cogigo html porque me aprece esta protegido gracias

José M. dijo...

Hola Stuka,

para los códigos que son más complejos pongo un archivo externo con el código, pero esto es solo una tabla que debes completar con los elementos que quieras, por lo que no hace falta copiar ningún código.

jhyrlecrystal dijo...

hola hice todo exactamente pues eso creo .. pero no me funciono lo de las imagines.. no salen
te agradeciria si puedes ayudarme con esto

José M. dijo...

Hola jhyrlecrystal

tu problema es con las imágenes?? comprueba que estás escribiendo correctamente la dirección URL de las mismas.

Muma dijo...

O no entendí o no me funcionó... Ayúdame por favor...

José M. dijo...

Hola Muma,

Es solo crear la estructura de una tabla e incluir las imágenes e hipervínculos con código HTML.

Comprueba también que estés escribiendo correctamente la dirección URL de las imágenes.

henri villacriz dijo...

Hola que tal, no se su puedes ayudarme, necesito pegar en mi web el "sigueme" del facebook, por un tema de marketing.
¿Cuales son los pasos a seguir?

desde ya muchas gracias

José M. dijo...

Hola Henry

accede a tu cuenta de Facebook, pulsa en Inicio -> Anuncios y páginas -> Marketing -> Get a Badge -> y ahí encontrarás los códigos necesarios para crear una insignia, el botón "Me gusta", etc...

Otra forma es hacerlo manualmente, puedes coger la imagen del botón que quieras y añadirle un hipervínculo con la etiqueta A HREF.

Un saludo :-)

Maria dijo...

Me vas a perdonar pero es que no entiendo absolutamente nada de esta entrada y mira que le estoy poniendo empeño, y el problema es que todo el mundo lo explica igual. Esto es para listos.

José M. dijo...

Hola María

dime en qué paso te quedas para intentar aclararlo un poco.

Un saludo :-)

Edu dijo...

Hola qué hay, me gustó mucho la entrada para enlazar con twitter, pero en el tema de enlazar el blogger con facebook y este de los "sígueme" estoy absolutamente perdido, porque las rutas que comentas para los pasos a seguir desde la página de facebook a mi personalmente no me aprecen.

José M. dijo...

Hola Edu

sobre el tema de enlazar Blogger con Facebook desde que escribí la entrada han cambiado las opciones. Te aconsejo que para enlazar esto ahora utilices la aplicación Networkedblogs.

Por otro lado, el tema de esta entrada es solo utilizar una tabla HTML con imágenes insertadas e hipervínculos en las mismas.

De todas formas, por los comentarios parece ser que no está muy claro, es posible que la modifique o haga una nueva dentro de poco.

Un saludo :-)

Publicar un comentario

Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.