Botones para compartir deslizantes (Facebook, Twitter, Google+, Taringa, Bitácoras)
El efecto deslizante lo haremos con jQuery, y la burbuja con el texto (el botón) lo haremos con CSS3.
Empecemos: primero ingresa en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios, y antes de </head> pega el script:
Ahora antes de ]]></b:skin> agrega los estilos:
Por último, busca esta línea:
Justo arriba de ella coloca el contenedor con los botones:
Guarda los cambios y listo. En las anotaciones en color verde he puesto como siempre las áreas que se pueden personalizar como el color de fondo, de texto, etc. En donde dice cellpadding='7' puedes controlar la distancia entre cada botón.
Recuerda que:
Sólo será visible en las entradas individuales, NO en la portada.
La burbuja está hecha con CSS3, así que si usas un navegador viejo como Internet Explorer 8 sólo verás un rectángulo.
En Internet Explorer el botón de Facebook no se verá bien, aunque sí funcionará.
Una consulta, si quiero que directamente aparezcan todos los botones a la vista, es decir,que no esten escondidos dentro de la burbuja. como tengo que hacer?
/* Botones para compartir ----------------------------------------------- */ .msg-compartir { width:140px; /* Ancho de la burbuja */ position:relative; padding:10px; margin:1em 0 3em; text-align:center; color:#000; /* Color del texto */ background:#F3961C; /* Color de fondo de la burbuja en navegadores que no soporten CSS3 */ /* Color de fondo gradiente de la burbuja */ background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c)); background:-moz-linear-gradient(#f9d835, #f3961c); background:-o-linear-gradient(#f9d835, #f3961c); background:linear-gradient(#f9d835, #f3961c); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } .msg-compartir::after { content: ""; position: absolute; bottom: -15px; left: 67px; border-width: 15px 15px 0; border-style: solid; border-color: #F3961C transparent; /* Color de fondo del triángulo de la burbuja */ display: block; width: 0; } .btns-compartir { display: none; margin-top:-10px; background:#F2F2F2; /* Color de fondo del contenedor de los botones */ border:1px solid #D0C9AF; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; margin-bottom:20px; }
/* Botones para compartir ----------------------------------------------- */ .btns-compartir { display: none; margin-top:-10px; background:#F2F2F2; /* Color de fondo del contenedor de los botones */ border:1px solid #D0C9AF; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; margin-bottom:20px; }
No tengo Facebook, twitter, google+, Bitacoras, Tumblr, etc hahaha, pero sinceramente y como diseñador, me gustan los botoncitos haha.
ResponderEliminarQue tenga muy buen día.
Una consulta, si quiero que directamente aparezcan todos los botones a la vista, es decir,que no esten escondidos dentro de la burbuja. como tengo que hacer?
ResponderEliminarHola Nico , para hacer eso tenes que hacer lo mismo que esta en la entrada , solamente que en vez de pegar esto :
Eliminar----------------------------------------------------------------
/* Botones para compartir
----------------------------------------------- */
.msg-compartir {
width:140px; /* Ancho de la burbuja */
position:relative;
padding:10px;
margin:1em 0 3em;
text-align:center;
color:#000; /* Color del texto */
background:#F3961C; /* Color de fondo de la burbuja en navegadores que no soporten CSS3 */
/* Color de fondo gradiente de la burbuja */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.msg-compartir::after {
content: "";
position: absolute;
bottom: -15px;
left: 67px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #F3961C transparent; /* Color de fondo del triángulo de la burbuja */
display: block;
width: 0;
}
.btns-compartir {
display: none;
margin-top:-10px;
background:#F2F2F2; /* Color de fondo del contenedor de los botones */
border:1px solid #D0C9AF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin-bottom:20px;
}
----------------------------------------------------------------
vas a pegar esto :
/* Botones para compartir
----------------------------------------------- */
.btns-compartir {
display: none;
margin-top:-10px;
background:#F2F2F2; /* Color de fondo del contenedor de los botones */
border:1px solid #D0C9AF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin-bottom:20px;
}
No puedo copiar los códigos. Me aparece tu dirección del blog. Me fijo si lo puedo solucionar de alguna forma. Saludos.
ResponderEliminarBueno, dale. Cualquier cosa avisame!
Eliminar