Tutorial: Cómo incrustar botones sociales en tus sitios y blogs

A continuación les voy a contar cómo agregar botones de sus redes sociales en sus sitios y blogs. Es muy fácil, solamente tienen que tener las imágenes, que para su suerte vamos a ir subiendo en nuestro blog, y luego subirlas a algún hosting para obtener su URL. Pueden usar algunas páginas como Mediafire, PhotobucketTinypic u otros que les agraden, yo opto por subir las imágenes a alguna entrada en borrador de mi propio blog por si alguna de las páginas que otorgan estos servicios falla. Teniendo en cuenta lo anterior, solamente queda seguir los siguiente y fáciles pasos.



Ojo: El siguiente código se aplica para cualquier imagen que quieran incrustar en sus sitios, no solamente botones de redes.




CÓDIGO 1

El código es el siguiente:

<a href="URL del sitio o rrss"><img src="URL de la imagen" /></a>

OJO: para tener la URL de la imagen sólo deben subirla a alguna página de almacenamiento de imagen, como les mencioné en el primer párrafo de este post, o subirla en alguna entrada en borrador que destinen para subir sus iconos. Una vez arriba le dan clic con el botón derecho del mouse y copian la URL de la imagen.




CÓDIGO 2



Si quieren que salga centrado, sólo tienen que agregar antes y después del código "center", como se muestra a continuación.

<center>
AQUÍ VA EL CÓDIGO
</center>

Ahora, si quieren poner una imagen al lado de la otra, como se puede apreciar en la imagen principal de la entrada, lo único que tienen que hacer es pegar el CODIGO 1 las veces que quieran justo al lado del código anterior, como se ve en el ejemplo:


<a href="URL del sitio o rrss"><img src="URL de la imagen" /></a><a href="URL del sitio orrss"><img src="URL de la imagen" /></a>


Por el contrario, si quieren que salga en fila hacia abajo tienen que ponerlo con un salto, como se aprecia a continuación:


<a href="URL del sitio"><img src="URL de la imagen" /></a>
<a href="URL del sitio"><img src="URL de la imagen" /></a>


Vieron que era fácil :)

Ahora les dejamos un código ya hecho con estos lindos botones de redes sociales, diseño de cojines de peluches que puedes descargar aquí el pack en todos sus tamaños.

Acá les va el código:

<center>
<a href="FEED del sitio"><img src="http://4.bp.blogspot.com/-_THR4kdDgcs/VWu0PXVo39I/AAAAAAAAFC0/mJSlE7s1o9E/s1600/Furry-Cushion-RSS_48.png" /></a><a href="URL facebook"><img src="http://1.bp.blogspot.com/-vVryuHDFTO4/VWu0PY_NaUI/AAAAAAAAFCs/CwZNa1FVCVQ/s1600/Furry-Cushion-Facebook_48.png" /></a><a href="URL twitter"><img src="http://4.bp.blogspot.com/-LdQVvkDBo7I/VWu0P_JBvdI/AAAAAAAAFDA/QqJRxElXhQ0/s1600/Furry-Cushion-Twitter_48.png" /></a><a href="URL Linkedin"><img src="http://4.bp.blogspot.com/-FpvrSEtrsC8/VWu0PeTP-uI/AAAAAAAAFC4/0R6mvWhv-u8/s1600/Furry-Cushion-LinkedIn_48.png" /></a>
</center>


Lo único que tienen que hacer es cambiar donde está lo escrito en rosa por las respectivas URL de sus sitios o redes sociales. Si por casualidad no tienen algunas de las redes, sólo tienen que borrar el código correspondiente.

Para agregar el código al blog solamente tienen que agregar en diseño un gadget o widget de HTML y pegarlo ahí.



CONVERSATION

10 ya son Blogger@s:

  1. No soy capász de poner los diseños ayuda por favor

    ResponderEliminar
  2. Hola chicas!! Cómo puedo poner en mi blog botones de redes sociales que cambian de color al pasar al ratón por encima?? Un saludo :)

    ResponderEliminar
    Respuestas
    1. te refieres como el que está en BeBloggera??? a que se oscurezca al pasar el cursor?

      Eliminar
  3. MUCHAS GRACIAS ME QUEDÓ GENIAL http://rapadoazul.blogspot.com.ar/

    ResponderEliminar
  4. no entiendo como se coge la url de lasimagenes....estoy super perdida con todo esto...

    ResponderEliminar
    Respuestas
    1. Para saber tienes que darle click derecho con el mouse a la imagen y colocar copiar url de la imagen

      Eliminar

Todo comentario que no tenga relación con el post o sobrepase los límites de la libre expresión, será moderado y no saldrá publicado.

Back
to top