Botones de redes sociales flotantes para tu sitio. (Horizontales)

Botones de redes sociales flotantes para tu sitio. (Horizontales)

Como aprecias en la imagen, en esta ocasión te traigo unos códigos, que son muy sencillos por cierto, pero que te permitirán colocar botones si así lo requieres de 6 de las redes sociales más concurridas actualmente. Facebook, Google +, Twitter, Linkedin, Instagram y Youtube.

 

Puedes escoger el código que mejor te convenga, para presentarlo donde lo requieras de manera HORIZONTAL, en las esquinas o en las partes centrales de la pantalla.

1. Elije cualquiera de los códigos…

Los botones se mantendrán flotantes fijos en su lugar a manera de capas (layers) y le podrás colocar el  enlace según corresponda.

Deberás abrir la plantilla de tu blog o la pagina principal de tu sitio e ir hacia la última línea y colocarlo antes de la etiqueta </head>

Esquina Superior - Izquierda (Horizontales)

<!-- Botones Redes Sociales - Esquina Superior-Izquierda --> <div style="width:200px;height:30px;top:10px;left:10px;position:fixed;"> Pega aquí el código del último cuadro </div>


Esquina Superior - Derecha (Horizontales)

<!-- Botones Redes Sociales - Esquina Superior-Derecha --> <div style="width:200px;height:30px;top:10px;right:10px;position:fixed;"> Pega aquí el código del último cuadro </div>


Esquina Inferior-Izquierda (Horizontales)

<!-- Botones Redes Sociales - Esquina Inferior-Izquierda --> <div style="width:200px;height:30px;bottom:10px;left:10px;position:fixed;"> Pega aquí el código del último cuadro </div>


Esquina Inferior-Derecha (Horizontales)

<!-- Botones Redes Sociales - Esquina Inferior-Derecha --> <div style="width:200px;height:30px;bottom:10px;right:10px;position:fixed;"> Pega aquí el código del último cuadro </div>


Centro Superior (Horizontales)

<!-- Botones Redes Sociales - Centro Superior --> <div style="width:200px;height:30px;top:10px;left:50%;position:fixed;margin-left:-100px;"> Pega aquí el código del último cuadro </div>


Centro Inferior (Horizontales)

<!-- Botones Redes Sociales - Centro Inferior --> <div style="width:200px;height:30px;bottom:10px;left:50%;position:fixed;margin-left:-100px;"> Pega aquí el código del último cuadro </div>

2. ¡ Muy bien ! Ahora que elegiste donde deseas colocar la barra de botones, copia el siguiente código y pégalo en el espacio donde te dice "Pega aquí el código del último cuadro"

<a href="url_de_tu_red_social_Facebook"><img alt="" id="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaQ5kGy-toQtPSxAtlkltvzn3ndwYMHhLKhqzPwv__ABo9E5NX_hTMZF-yAJOwZA2JI532neHWZeFdy3qPchUwFVTnR41Wswz3P9HA70ufZE4oe5hWPWuNhBo6ew2SHICRZ9eg6pixLRU/h120/fb2-transp.png" style="height: 30px; width: 30px;" /></a> <a href="url_de_tu_red_social_Google+"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRvt0mNuCsHoAdgS0w0nUZy_sUKL0qi0B1sQn9SR2Pdus1yPB_hTC3-wj0gOWPxTu2qELlc20hVwJXtMQOV0vD6Db-eiuqCeE2W9tzuKkDYreyzDAcT9_JnCvhKPkeXbS18BunznoOJ-g/w136-h140-p/google2-transp.png" style="height: 30px; width: 30px;" /></a> <a href="url_de_tu_red_social_Twitter"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc6Wau5jqJeRNNi59_1icqVNfM_Y4VtsY1HtAYU3sSF_cbkqxI9vJeY_m39gQQquV0_sb4SqcukPRSU9geuB75LFbe0MlK69Z2dxqhdE7fIQIs2LsDLcT1Wl5G7_F9cQvotycLCC1zbFU/w136-h140-p/twitter2-transp.png" style="height: 30px; width: 30px;" /></a> <a href="url_de_tu_red_social_Linkedin"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLUpEkxZj2kIi_ODbGx-dY7vSHSmJf5T7AHGyZ37vP1IZs4uSNYGDkW3EZe4yavYeSIHQA87RMbSbaySsW2BlxIR5BOwfaPcgs1XI2Hqsoyn4d7cFwV_KMYL_D7Gd3Vz4L2E3-ICO17Mk/w136-h140-p/linkedin2-transp.png" style="height: 30px; width: 30px;" /></a> <a href="url_de_tu_red_social_Instagram"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAVPpVrAsacjSRjA30MBm1dO3r3ZWpF3xgD37isZTJc_e3sNeuAzAy-AHpQjw0Y6l7XrF-85r6Kk9pT3_4cmshQaBoFpeFBqqz9O4RanKD0JYGNc2p5kmPw90Dm30Z4Jb7P7a6fhElRJA/w136-h140-p/instagram2-transp.png" style="height: 30px; width: 30px;" /></a> <a href="url_de_tu_red_social_Youtube"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV4K9AtGfNfhCrnavvIiijZxp-rIN2j9nWOKpci_rdN_Tcel0QYO8q0kYPVI8n7oMzlGBEQ3t3FkJ9RvYd6ibhP4uq7wYjZKLifXA0g4B-p22TAA-Ug4qeeFQqA_ma-mmi6UXPCt_BrtI/w136-h140-p/youtube2-transp.png" style="height: 30px; width: 30px;" /></a>

¡ Listo ! Ahora ya tienes el código completo...

Recuerda que es mejor que coloques el código antes de la etiqueta </head> de la plantilla.

Lógicamente, puedes probar que tal se ve donde lo coloques.


3. Una vez que te decidas puedes configurar la url de tu red social o cambiar la imagen, según corresponda. 
 
 <a href="url_de_tu_red_social_Google+"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRvt0mNuCsHoAdgS0w0nUZy_sUKL0qi0B1sQn9SR2Pdus1yPB_hTC3-wj0gOWPxTu2qELlc20hVwJXtMQOV0vD6Db-eiuqCeE2W9tzuKkDYreyzDAcT9_JnCvhKPkeXbS18BunznoOJ-g/w136-h140-p/google2-transp.png" style="height: 30px; width: 30px;" /></a>

En esta entrada te dejo unas imágenes en formato PNG con fondo transparentes y con otras tonalidades por si las deseas descargar según tu necesidad.

https://electrosystem-ec.blogspot.com/2017/12/imagenes-png-de-botones-redes-sociales.html

Espero te agraden, aunque lógicamente puedes también colocar cualquier otra imagen que sea de tu gusto.

Comenta si tienes alguna inquietud, no dudes en preguntarme si no me doy a comprender en algo y alguna otra cosa más.

Quizás también te interese:

Botones de redes sociales flotantes para tu sitio. (Vertical)