Como colocar botones de social media! -Tutorial-

diciembre 08, 2014



Hice esta entrada para quienes deseen agregar estos botones pero no sepan como y tampoco esten muy familiarizados con Blogger.



Los considero una manera mas limpia de organizar tus links.



 Lo primero es hacer sus botones o bien buscar los botones para ponerlos yo use esta pagina 40 Sets of Free Social Media Icons son gratis. Si quieren algo mas personalizado les dejo este tutorial. Los descargas y descomprimes y escoges los que quieres usar.


  
Yo hice una carpeta y los copie ahi.



A continuacion sube los iconos que quieres usar a un sitio de almacenamiento pero la manera mas facil para no complicarnos subelos a Facebook de manera privada. Aunque si los botones tienen transparencia lo mejor es un sitio como Flickr o alguno de esos.

Ahora ve a Diseno > Anadir Gadget



Y seleccionas "HTML/Javascript.



Se abrira una ventana como esta.



Escribe el titulo que tu quieras.

En contenido copia la siguiente linea... Es codigo HTML

<a href="Direccion a la que quieres que vaya el link" title="texto que muestra cuando el cursor esta encima" target="_blank">
<img src="Direccion de la imagen
alt="texto que muestra cuando el cursor esta encima" style="border:none;" /> </a>

La direccion a donde quieres que vaya es de tu preferencia por ejemplo si el boton es de Facebook obviamente copias la direccion de tu Facebook, ya sea pagina o tu perfil.

El texto para mostrar cuando cursor esta encima puede ser "Mi Facebook" o algo de tu preferencia.

Ahora en direccion direccion de la imagen. Ve a tu album de fotos y en la imagen copia la direccion de la imagen y la pegas en ese espacio.


Una vez sustituido todo te deberia quedar algo similar a esto:

<a href="http://www.pinterest.com/whitzhytouky/" title="Pinteres" target="_blank">
<img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/1920554_746050998813956_2608247174446531831_n.jpg?oh=b9719d450cac63fff88e7447985e23ee&oe=551359A7&__gda__=1426909542_8b1cc31eef5a0770ecf29ab2658f8ca6" style="border:none;" /> </a>

Puedes copiarlo tantas veces como botones quieras pero recuerda ir cambiando las direcciones y titulos.

Yo puse 4 botones al final.


Espero les haya gustado y les sirva de algo.

4 comentarios:

  1. ¡Que bueno tu tutorial! No tenía idea de cómo ponían esos botones tan bonitos. Cuando me de por ponerlos vendré a tu blog, gracias.

    Por otro lado, soy nueva en Blogger, y veo que tú también, eh. Si pudieras pasarte por mi blog y dar tu opinión sería genial, saludos ♡.

    ResponderEliminar
    Respuestas
    1. Claro linda! Solo dame tu direccion y encantada! Te seguire.

      Eliminar
  2. Holaaa. Me gusto mucho tu entraday creo que lo hare :) te sigo, me gusta mucho tu blog. Te espero en mi blog y si te gusta lo sigas tambien. Besooos

    ResponderEliminar
    Respuestas
    1. Gracias por leer! Claro solo pasame la direccion :D! Nos leemos.

      Eliminar

Con tecnología de Blogger.