Los bloques de citas o blockquote es un bloque de escritura destacado cuando escribes un articulo en sitio web o blog.Cuando comparto codigos o scripts por lo general en este blog utilizo un blockquote. Anteriormente he compartido con ustedes algunos articulos de blockquote con estilo .
En esta oportunidad les mostrare un blockquote animado cual de seguro llamara la atencion de tus visitantes. Este ademas se activa al pasar cursor sobre la mismo,ademas un icono de cita se mueve hacia tu blockquote al mismo tiempo cambiara de color.
Cheque Blockquotes con efecto bombilla para Blogger
Este es bastante apelativo y maravilloso y espero le añada mas estilo a tu articulos donde incluyas citas.
Solo sigue los pasos siguientes para insertar Blockquote Animado a tu blog de blogger.
1.Entra en tu cuenta de blogger
2.De click en Plantilla luego Editar Html
3.Encuentra la siguiente etiqueta ]]></b:skin>
4.Copia y pega el codigo de abajo antes de la etiqueta ]]></b:skin>
/*****************************************
Blockquote por www.ciudadblogger.info
******************************************/
.post blockquote {border:5px
solid #007FFF;font-size:120%;line-height:100%;overflow:auto;padding:10px;font-family:courier;color:#000;width:360px;position:relative;margin:0
auto 20px auto;padding:12px
80px 15px;text-align:left;border-radius:5px;box-shadow:0 0 5px 2px rgba(0,0,0,.35);cursor:default;background:#9FCFFF;border:1px
solid #6F91B2;background:#9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjFT8r0d0qN0f_F_CGO6J4TfAG_QEPQ7Wsii3J67G_yxioexTzIZec4DlWHlp1F9-cDgFy-2Rm91B_pPZMPWpn_DY6Jixx_oBb4Z4nNRsOgmqwAPCCbe9OXvq2OddNXznkzwp5QtdXtT7/s320/BS+blockquote.png) no-repeat 5% 9%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post blockquote:hover {
border:5px
solid #0066B3;border-radius:15px;
background:#0186ba;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post blockquote p {
margin: 0.75em 0;
}
Como Usarlo el Blockquote Animado
:
Para aplicar este truco selecciona el codigo que deseas destacar y da click en el,mira la siguiente imagen:
Chequea Blockquotes Personalizables
0 comentarios:
Publicar un comentario