COMO PONER ICONOS DE REDES SOCIALES EN NUESTRO BLOG

Cuando comencé con el blog tenía claro que quería un blog bonito y por eso cada ratín que tengo le dedico para insertar aquellos elementos que me gustan. Aún le quedan muchas cosas que cambiar pero para ir modificando mi blog necesito tiempo y es eso precisamente lo que no tengo demasiado.

No tengo ni idea de html, ni grandes conocimientos de informática (mis conocimientos no van más allá que los de cualquier otra persona), pero con paciencia y leyendo mucho voy salvando mis obstáculos y aprendiendo un poco.

Una amiga me ha preguntado cómo he insertado twitter con el blog, no sabía muy bien a lo que se refería pero me acordé de mi misma cuando lo hice y durante un tiempo tuve el icono , cutreicono, de twitter en mi blog. Yo veía los blogs con esos iconos de social media  y decía "pero qué chulada! cómo se pondrá eso?". Pues es lo que os voy a explicar.

El modo en que yo lo hago no será el más rápido pero a mí me funciona. Lo primero que tenemos que hacer es buscar unos iconos de redes sociales que nos gusten y descargarlos. Para eso yo utilicé pinterest



Lo mejor es descargarlos en .png, aquí teneis unos cuantos. Descargamos lo que nos gusten de dónde nos gusten y yo los subí a Imageshack (creo que voy a cambiar de página pero esta funciona bien) y eso lo dejamos quieto por el momento.

El icono en cuestión lo que va a hacer redirigirnos a nuestro espacio en cualquiera de las redes sociales, lo que tenemos que hacer es introducir un código html que permita hacer eso. El código que me funciona es éste:

<a href='nuestra dirección en la red social que sea' target='_blank'><img alt=”redsocial en cuestión” src='dirección de la imagen'
title='redsocial en cuestión' /></a>


Vayamos por partes:

1- Dirección de nuestra red social: solo tenemos que pinchar en nuestro perfil y copiar la url que aparece en la barra de direcciones. Fácil, verdad?

2- Red social en cuestión: la red social que queramos enlazar: twitter, facebook...

3- Dirección de la imagen: volvemos a Imageshack y pinchamos en el icono que queramos poner, por ejemplo twitter, y clickamos en la "i" azúl que nos dice "share it" (compartir)


nos saldrá una ventana emergente y copiamos el link que aparece en azul (dónde pone direct)


y esa es la dirección de nuestro icono de twitter que vamos a poner en el código html que os puse arriba.

Con lo cual si queremos poner el icono de twitter , el código nos quedaría así (ojo, esto no se copia que os lleva a mi tuiti :) )

<a href='https://twitter.com/SrtaPalomo' target='_blank'><img alt=”twitter” src='http://imageshack.us/a/img90/9841/qfii.png'
title='Twitter' /></a>

Hasta aquí , fácil. Pues lo que queda es lo más fácil de todo ^_^

Nos vamos a nuestro escritorio y pinchamos en diseño, añadir un gadget y el gadget va a ser insertar código html, el que sale subrallado


y ya solo queda meter nuestros códigos, uno detrás de otro separados con un espacio


Le damos a guardar y ya tenemos unos iconos de social media, o redes sociales como lo prefirais, a nuestro gusto!!

Espero que os haya sido útil

Bss

17 comentarios:

  1. Mil gracias. Lo he probado. Así quito gadgets de facebook y twitter de mi blog. Supongo que aligeraré un poco la ´página :D

    ResponderEliminar
  2. Buenas
    Rесonozco que hаstа hoy nо mе molaba demаsiаԁo elblоg, sin еmbaгgo con los ultіmoѕ рοѕts estοy siguiendolo regularmente y me eѕta interеsanԁo bastante.


    Ѕіgue asі!

    Ρara mas informасіon ; pepa

    ResponderEliminar
  3. me alegro que te esté gustando el blog, poco a poco me voy haciendo con él. Al principio iba un poco a ciegas hasta que se me va ocurriendo cosas.Ahora estoy en plena semana de estres, en cuanto se pase vuelvo con más contenido que espero que tamibién te guste. Gracias por los ánmimos :)

    Bss

    ResponderEliminar
  4. Me ha encantado este post. Me has caído de...facebook, jajajaja. Me quedo.
    Un besico

    ResponderEliminar
    Respuestas
    1. me encanta que te encante :) Bienvenida Rojo Ababol, espero que disfrutes en mi casita

      Bss

      Eliminar
  5. Gracias por la ayuda, pero tu sabes como cambiar los iconos que salen debajo de cada post por defecto?

    ResponderEliminar
    Respuestas
    1. pues no me he puesto, la verdad. Le voy a echar un ojo (la verdad que afea un poco) y si me hago con ello post. Un saludo y bienvenida :)

      Eliminar
  6. GRACIAS! venía un rato ya mirando en otros blogs pero no me resultaba. Un saludo :)

    ResponderEliminar
  7. Esta Rojo Ababol siempre cayendo en los sitios correctos jajajajajaja Que Post mas guapo y mas aprovechable!!!!!!!!!!!!!!!!!!!!! Ya luego me contaras como te fue con la caja de luz. Besos!

    ResponderEliminar
  8. Acabo de llegar por casualidad a tu blog, buscando este mismo tema, y ¡muchísimas gracias! No había manera de poder instalarlos, pero gracias a tu explicación, ¡ya lo he conseguido! Muchas gracias!!

    ResponderEliminar
  9. Hola!!! Loca estaba buscando un tutorial acerca de esto, pero y si tenemos una imagen en el disco duro como la agregaríamos???

    ResponderEliminar
    Respuestas
    1. Da igual de dónde saques la imagen, siempre la tienes que subir a (por ejemplo) imageshack ( o tinypic que también funciona bien) y luego sigues los pasos :)

      Eliminar
  10. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  11. ¿De donde me puedo descargar el primer modelo? es el que tu tienes puesto y no lo encuentro por ningun sitio.
    Gracias de antemano

    ResponderEliminar
  12. Muchas gracias me ha servido un montón!!! Por fin alguien que pone las cosas claras! xD

    ResponderEliminar

Si te ha gustado ¡Dilo! es sexy ;)