Botones para Redes Sociales, tipo "Murcielago"
Los llamo así, porque al estar quietos en la parte de arriba están ubicados de cabeza, (como los murciélagos), y al moverlos se ubican ya de forma normal.
Aquí te muestro como hacerlo, solo sigue las indicaciones.
¡¡¡ IMPORTANTE: Primero pegar los códigos en un bloc de notas o en Word, para editarlos sin tocar la plantilla. !!!
1 - Vamos a diseño
2 - Clic "+ Añadir un gadget"
imagen
3 - Se abrirá ventana así:
4 - Clic en: "HTML/JavaScript"
5 - Se abre otra ventana así:
6 - Clic dentro de "Contenido" y allí pegamos el código de abajo desde:
<!-- Botones Murciegalos -->
HASTA
<!-- Fin Botones Murciegalos -->
7 - Así, nos quedará el código.
8 - Por último damos Guardar y listo.
<!-- Botones Murciegalos -->
<div class="botones">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBsDOAB4-xsvjxD6ROyE0MMEfxBxGaJo6eJIJMOKp_kELkVKNfR2tnN2RLvLoBRI0nWInLilX982z70zHtjcDxPUaj3jEkb56GxTnZ2ygCPKPclNjWwchmuHScHXYxvSJeVh21P1Jc7w8/s1600/b2ap3_large_Como-aprovechar-tus-redes-sociales+-+copia+%25287%2529.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD1OqCxBZ6phYWwPHxq2W-AKNO9CUbDiLB5QWpNmai4w5MNbCd4VBQYVVSAX3Ho1XfPumInVf3LEvD6z7hFnHKba2x_CJyB9rIAFzuF0ex2C3PIjaIGYH1LXeRxCrxLxpgEFDQ3lPZWE4/s1600/b2ap3_large_Como-aprovechar-tus-redes-sociales+-+copia+%25288%2529.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnXd2p09zgiIfQesJA3th0cEOnt6DGCBue5Zblu8D8XF1Vx7SKA5tIA07Fp3GVxMS2X1TinoLezktkOuAD6JzNf69fgxWTZ029F2ThAeIYhpVYxxkm7Nb9hYhumxRDu4iz2lv5v_v0ok/s1600/b2ap3_large_Como-aprovechar-tus-redes-sociales+-+copia+%25286%2529.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXOO6FZ36Z9DRMl3soHkTilGb_1A7Km9WB40NwuyNFOWD5fHAbMFMck1LNRXC2MeoYPyiCkQ7F-RWcEJmkyuPbCNcjBbnNCJ6XxYhY3uF7doZ2aDoItC9U3DYKbmmQGpWs_Vlfy3SFyU0/s1600/b2ap3_large_Como-aprovechar-tus-redes-sociales+-+copia.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAB37rOpkdh5jpWqx9AhKZ_agE_I0TEz7lPBczpGKQZ4NXDjBxNFhtVZxYALgS2VEWDT9aN4ZbP36Vbn4m-dLkBg_hJl1F1Ik2gdvGQxyKLO9p0k495nftiWRV14-u5b78LsPth0NW3OQ/s1600/b2ap3_large_Como-aprovechar-tus-redes-sociales+-+copia+%25282%2529.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKTGOG358FMTOIKdAECR2DWk9wNjbKpnxWrRr_HqYmDibccYGCDnCPueKemO1ES-g14ct8FuRJUJR864S1I-Ggcyq7k_1qV_qCfWayDDbUfnmo6ruV9gWGIOY5h5jU4C_hCpkHXxaQmH4/s1600/b2ap3_large_Como-aprovechar-tus-redes-sociales+-+copia+%25283%2529.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2PAu43Ub79UShE3GO83fd0aRZA5Bh3yqXoIakwD32-_YKnyrCZ29o8NRN1HCyeqmvYBk2MYLLY8MKIKC5_y_lcLsuKHY38cPgIaPeSVvK9W0XWf6GxC72yBBL7h7iPRpz_9ONNfSGynI/s1600/b2ap3_large_Como-aprovechar-tus-redes-sociales.jpg" alt="" /></a>
</div>
<style>
/* ===== =========== CSS botones ==================== */
.botones{ /* No borrar, ni modificar */
position: fixed; /* Para manternerlos fijos y no se muevan al bajar la página */
z-index: 10; /* Para que esten por encima de las entradas */
}
.botones img { /* No borrar, ni modificar */
margin-top: -36px; /* Se ocultan arriba, a menor número mas se esconden */
padding: 5px; /* Distancia entre botones */
width: 50px; /* Ancho de los botones, si los quiere cuadrados, ancho y alto deben tener mismos px */
height: 50px; /*Alto de los botones, si los quiere cuadrados, ancho y alto deben tener mismos px */
transform: rotate(180deg); /* Se mantienen, mirando hacia abajo, si el valor es 0, no giraran */
border-radius: 15px; /* modifica los bordes, si los desea redondos, cambiar '15px' por '50%'*/
transition: all 0.5s ease; /* Tiempo que demora en hacer el giro y ubicarse */
position: relative; /* */
}
.botones img:hover { /* No borrar, ni modificar */
transform: translateY(34px); /* Distancia que recorrerá desde arriba */
transition: all 0.5s ease; /* Tiempo que demora en devolver el giro y ubicarse */
}
/* ================ fin CSS botones ==================== */
</style>
<!-- Fin Botones Murciegalos -->
Para configurar los estilos y darles forma, modificamos todo lo que esta antes de las letras naranjas:
/* */ = Explicación de cada línea, también se puede BORRAR lo que esta adentro
Para sacar las 'url' acá te enseño como se hace: Sacar URL
Para sacar las 'url' acá te enseño como se hace: Sacar URL
¿Como agregamos o quitamos un botón?
Simple:
Para agregar, pegamos la siguiente etiqueta después de cualquier </a>
<a href="#"><img src="#" alt="" /></a>
Para quitar, solo eliminamos desde <a href --hasta-- </a>
¿Como cambiar la imagen de un botón?
Una vez hayas extraído la URL la pegas, donde estan ubicadas las letras rojas despues de -a href="- hasta las siguientes doble comilla.
