jueves, 14 de marzo de 2013

Personalizar bloques entrecomillados, bombilla intermitente para Blogger

Este tutorial realmente le permitirá crear bloques entrecomillados impresionante y atractivo para sus puestos de blogger o sitios web. Estos bloques entrecomillados cambiará de color cuando el cursor del ratón se asoma sobre ella.  Pero este efecto bloques entrecomillados es excepcional! Sólo echar un vistazo de un blockquote siguiente ejemplo.

 
Interesante, ¿no? Ahora vamos a aprender cómo añadir efectos similares como el efecto bombilla parpadea arriba.

Añadir El Blockquote bombilla intermitente para Blogger

Esta blockquote se puede añadir en la forma similar a como se explica en mis mensajes earliar. Si usted es nuevo a continuación, lea esta parte de mi post anterior -> Agregar y personalizar Blockquote En Blogger
El código CSS que se inserta justo por encima de ]]></b:skin> es esto,

blockquote {
background: #000 url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5enN3yNAiJ9rlZvGnqovwPEMix3B_3xgzFcXV5VhdNwmMtg7UBZpgGsW3C_9teA3QkoJpP8U3MLM3Rkezw73QnYY01bekJjA1dBRZkWBRo0FSrvr03JjnFti1mdacVEa7zTwd8I2mses/s1600/bulb-off.gif ) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
border:1px solid #DDD;
}

blockquote:hover {
background: #000 url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5chfEYPltUuXk0B81T118SXrou4jfa5O5nDpSQQ74Qu0hNMVs7K1ZDWhSlaPMeZe4HUUDrqbJahxQpIvehQkr3Up155f0ze02wJyNOJ5zGJvprxMlOByXpdmMNcGqozagCfuU-i0KWPs/s1600/bulb-on.gif ) no-repeat right bottom ;
color:#E0E089;
}


blockquote p {
margin: 0;
padding-top:10px;
}


La segunda imagen en el enlace rojo aparece al pasar el ratón estacionario y la segunda imagen de enlace verde aparece cuando el ratón se mueve fuera de los bloques entrecomillados

No hay comentarios:

Publicar un comentario

Descripcion en imagenes con efecto deslizante usando css

Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripc...