Botones Murciegalo

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

¿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.