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

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

Semejante al post de los botones dispuestos de manera horizontal, como aprecias en la imagen, en esta ocasión te traigo unos códigos, que te permitirán colocar botones si así lo requieres de 6 de las redes sociales más utilizadas actualmente, Facebook, Google +, Twitter, Linkedin, Instagram y Youtube.

 

Puedes escoger el código que mejor te convenga, para presentarlo donde lo requieras de manera VERTICAL, 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 (Verticales)

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


Esquina Superior - Derecha (Verticales)

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


Esquina Inferior-Izquierda (Verticales)

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


Esquina Inferior-Derecha (Verticales)

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


Centro Izquierda (Verticales)

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


Centro Derecha (Verticales)

<!-- Botones Redes Sociales - Centro Derecha --> <div style="width:30px;height:180px;top:50%;right:10px;position:fixed;margin-top:-90px;"> 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. (Horizontales)