Blog de DiyDownloads Idea guardada 15 veces
La valoración media de 52 personas es: Muy buena

Cómo insertar botones de Redes Sociales en Blogger

Hoy les traigo el Tutorial de cómo insertar los botones de las Redes Sociales en Blogger.

Lo primero que vamos a hacer es Descargarnos los Botones que más nos gusten y alojarlos en hosting (hay muchos gratuitos), pero yo uso el Google Drive, que me parece más sencillo y más completo.

Una vez tengamos las imágenes subidas a Google Drive, tenemos que averiguar su URL, (si no sabes cómo hacerlo, te lo indico aquí): Tutorial URL Imágenes Google Drive

Una vez sepas ya cuáles son las URLs de las imágenes que vas a insertar para los botones, nos vamos al Blog y clicamos en Diseño:

Imagen 0

Luego clicamos en Añadir Gadget:
Imagen 1


De la lista que nos aparece, elegimos HTML:

Imagen 2


Copiamos este enlace: 

<a href='DIRECCIÓN DE VUESTRA RED SOCIAL' target='_blank'><img alt=”NOMBRE DE LA RED SOCIAL” src='URL DE LA IMAGEN' title='NOMBRE DE LA RED SOCIAL' width="60" /></a>

(Tenemos que sustituir lo que está en Negrita por los datos nuestros)

Ejemplo el Facebook mio sería así:


<a href='https://www.facebook.com/Diydownloads' target='_blank'><img alt=”facebook” src='URL DE LA IMAGEN' title='Facebook' width="60" /></a>

Y tan sólo me quedaría poner la URL de mi imagen....

Cada Enlace pertenece a un sólo Botón y por tanto a una sola Red Social, si queréis poner varios botones seguidos, por ejemplo...facebook, twitter y Pinterest, el ejemplo sería el siguiente:

<a href='https://www.facebook.com/Diydownloads' target='_blank'><img alt=”facebook” src='URL DE LA IMAGEN' title='Facebook' width="60" /></a>

<a href='https://twitter.com/Diydownloads' target='_blank'><img alt=”twitter” src='URL DE LA IMAGEN' title='Twitter' width="60" /></a>

<a href='http://www.pinterest.com/diydownloads/' target='_blank'><img alt=”pinterest” src='URL DE LA IMAGEN' title='Pinterest' width="60" /></a>

Con lo cual tendríamos que copiar en Contenido los 3 enlaces:

Imagen 3


(No os olvides que también hay que añadir las URLs de las imágenes....)

Una vez hayamos pegado todos los enlaces que queramos que nos salgan, le damos a Guardar.

Y luego clicamos en Guardar Disposición.

Le echamos un vistazo a nuestro blog y si vemos que los botones nos han quedado muy pequeños o muy grandes para nuestro gusto, sólo tenemos que volver al gadget que acabamos de crear y modificar los enlaces poniendo otro tamaño en dónde les he resaltado aquí en negrita:

<a href='https://www.facebook.com/Diydownloads' target='_blank'><img alt=”facebook” src='URL DE LA IMAGEN' title='Facebook' width="60" /></a>

<a href='https://twitter.com/Diydownloads' target='_blank'><img alt=”twitter” src='URL DE LA IMAGEN' title='Twitter' width="60" /></a>

<a href='http://www.pinterest.com/diydownloads/' target='_blank'><img alt=”pinterest” src='URL DE LA IMAGEN' title='Pinterest' width="60" /></a>

Y ya estarían los botones listos!!!

Cualquier duda comentadla que os ayudaré encantada!!!
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Un ' KIT-KAT '

Hola a tod@s, Quiero deciros que este blog ha entrado en modo "Kit-Kat", muchos habréis notado que no he publicado desde hace un par de meses y otros sabéis la razón...y es que me he embarca ...

Washi tape de tela DIY

Un DIY que me parece muy interesante, con el cual nos vamos a ahorrar bastante dinerillo la gente que nos dedicamos a hacer manualidades, artesanías, etc...Un Washi Tape de Tela hechos por nosotros mi ...

Frikyamigo Invisible Bloguero

Siiii, ya me llegóooooo!!! El regalito de mi FrikyAmiga Invisible!!!, que no sabéis de que os hablo?? Pues es que en Facebook tenemos un grupo: Frikymama"s Blogger Club y desde allí, nuestras ami ...

Recomendamos

Relacionado

Tutoriales Blogging Estilos

Como poner una biografía debajo de las entradas.

Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar. Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra c ...

avanzado BLOG blogging ...

Cómo instalar un slider de imágenes en blogger

Esta semana he recibido un correo con esta duda: ¿Cómo instalar un slider de imágenes debajo del cabecero en blogger? Y no es la primera vez que me preguntan por el mismo tema. Este tipo de correos no puedo contestarlos uno a uno, prefiero anotar las dudas y cuándo se repiten mucho, desarrollar un tutorial en el blog, para que pueda verlo todo el mundo. Si me conoces un poco, ya sabes que no soy m ...

BLOG blogging intermedio ...

Instalar los iconos de redes sociales en el header y sidebar de blogger

En una entrada anterior te conté cómo instalar una fuente llamada fontawesome para utilizar iconos en tus listas, páginas y entradas de blogger, para darles ese toque diferente y original que las haga especiales y visualmente atractivas. Puedes volver a revisar la entrada e instalar la fuente que te digo en el siguiente botón: CÓMO INSTALAR ICONOS EN BLOGGER Hoy, vamos a utilizar nuestros iconos p ...

acuarelas diseño watercolour ...

Iconos de Redes Sociales

Hola!!! Hace unas semanas estuve ocupada haciendo estos pequeños iconos de varias redes sociales para colocar el gadget de sígueme en el blog, que ya hacía tiempo que lo tenía en mente, pero un día por otro lo había dejado pasar. Os los podéis descargar desde este enlace. Están preparados en dos tamaños, 48x48 y 32x32, para que uséis el que os vaya mejor.Os voy a explicar también como los he puest ...

Blogger gadgets Tutoriales

Cómo instalar un botón de subir arriba

Si quieres que tu blog tenga ese botoncito en el lateral para subir arriba (como verás, yo tengo a mi perrito que dice "Súbeme") tenemos que hacer lo siguiente: Nos vamos a Diseño ➡ Añadir un gadget ➡ HTML. Le añadimos el siguiente código: <a href=# style=display croll;position:fixed;bottom:5px;right:20px; title=IR ARRIBA><img src="URL del botón de subir arriba", wid ...

watercolour acuarelas free printable ...

Iconos de Redes Sociales

Hola!!! Hace unas semanas estuve ocupada haciendo estos pequeños iconos de varias redes sociales para colocar el gadget de sígueme en el blog, que ya hacía tiempo que lo tenía en mente, pero un día por otro lo había dejado pasar. Os los podéis descargar desde este enlace. Están preparados en dos tamaños, 48x48 y 32x32, para que uséis el que os vaya mejor.Os voy a explicar también como los he puest ...

Tutoriales Redes Sociales Web

Como Personalizar botones de compartir.

Que feliz que me hace regresar al blog. Como algunos de ustedes saben, me fui de vacaciones, y regreso supercontenta, Mexico tiene lugares hermosos, llenos de historia y cultura, pero bueno esa es otra historia. Hoy vengo con un tutorial, que ya buena falta hacia por aquí en el blog. Este va a petición de mi amiga Marysol, que me ha pedido un tutorial para cambiar esos botones sociales para compar ...

general desarrollo web html5 ...

Día #10 Hablemos de los Videos en HTML5

En este tutorial o artículo, vamos a ver de pronto no todo acerca los videos en HTML5 pero si lo más relevante e importante de esta nueva etiqueta Video. HTML ha hecho cambios muy grandes en la web, que quizás la gente común no note pero a los que trabajamos en este campo se no se nos hacen grandioso, una de estas mejores es la de poder incluir directamente video y audio en el código, para depende ...