Como colocar botones de social media! -Tutorial-

by - 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.

You May Also Like

4 comments