Botones para Redes Sociales, tipo "Murcielago"

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://1.bp.blogspot.com/-gfanF9LHciE/XyBPpblJe-I/AAAAAAAAAiY/mx4L6BIjInoYEXO9EWCBVycjv3HUJZRAQCLcBGAsYHQ/s1600/b2ap3_large_Como-aprovechar-tus-redes-sociales%2B-%2Bcopia%2B%25287%2529.jpg" alt="" /></a>

<a href="#"><img src="https://1.bp.blogspot.com/-TZUK7RYU9sU/XyBPpTr5wzI/AAAAAAAAAic/GrPbY4ooF7sJeTOpcDfXRc4nSVDHsHi_gCLcBGAsYHQ/s1600/b2ap3_large_Como-aprovechar-tus-redes-sociales%2B-%2Bcopia%2B%25288%2529.jpg" alt="" /></a>

<a href="#"><img src="https://1.bp.blogspot.com/-F0roTDexjSQ/XyBPpYDJFzI/AAAAAAAAAiU/7awRsho8QeggYSYq25VDKEnKbc-3pwf9ACLcBGAsYHQ/s1600/b2ap3_large_Como-aprovechar-tus-redes-sociales%2B-%2Bcopia%2B%25286%2529.jpg" alt="" /></a>

 <a href="#"><img src="https://2.bp.blogspot.com/-5NsbbrgKrqg/XyA_rmPe7sI/AAAAAAAAAh0/xLK-HZmowgIbRVSQaG2vx0ODdXFL-2JlACLcBGAsYHQ/s1600/b2ap3_large_Como-aprovechar-tus-redes-sociales%2B-%2Bcopia.jpg" alt="" /></a>

 <a href="#"><img src="https://3.bp.blogspot.com/-x4VY_pUN4i8/XyA_qWPUEaI/AAAAAAAAAhY/rE_QeYJt5DEIDPimojDPgK96n-HS_v0yQCLcBGAsYHQ/s1600/b2ap3_large_Como-aprovechar-tus-redes-sociales%2B-%2Bcopia%2B%25282%2529.jpg" alt="" /></a>

<a href="#"><img src="https://2.bp.blogspot.com/-vNWe6hbTuxU/XyA_qT-kNuI/AAAAAAAAAhc/iNycrX7k9U8X6ncFJwU2GWCNu675YvndACLcBGAsYHQ/s1600/b2ap3_large_Como-aprovechar-tus-redes-sociales%2B-%2Bcopia%2B%25283%2529.jpg" alt="" /></a>

        <a href="#"><img src="https://1.bp.blogspot.com/-M8D3xf3PTxY/XyA_r13enUI/AAAAAAAAAh4/1891Qf3hhPgpmA8oGZPgKPQQP8C3W5ifQCLcBGAsYHQ/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.




Entradas populares