30 dic 2014

[Tutorial] Blockquote ~3~

Hoola! Os traigo otro blockquote que quedará genial en vuestro blog :D Este es...
Al pasar el cursor, cambia todo de color (que has elegido en el código)

Para poner ese blockquote en tu blog, debes ir a Plantilla > Edición HTML Ctrl+f y buscas ]]></b:skin> Y pegas antes de ]]></b:skin> el siguiente código:
blockquote {
font-family:century gothic;
background:#fff url(Url de fondo);
box-shadow:inset 0px  10px 0px #D2FDE1,inset 0px -10px 0px #D2FDE1;
font-size:12px;
border: 1px solid  #D2FDE1;
padding: 30px;
-webkit-transition-duration: 1.0s;
}
blockquote:hover {
text-shadow: 0 0 0.5em  #FFF , 0 0 0.5em #FFF;
font-size:12px;
border: 1px solid #D2FDE1;
box-shadow:inset 0px 900px 0px #E1BDF8,inset 0px -900px 0px #D2FDE1;
padding: 30px;
-webkit-transition-duration: 1.0s;
}
Editar:
Rojo: Puedes elegir como fondo del blockquote una imagen o un color. Si eliges color, pon el código del que quieras (tabla de colores); si quieres una imagen, pon el url del fondo que quieras.
Azul: El color del que quieres el blockquote, debes poner en todas el mismo color.
Lila: El color del blockquote al pasar el cursor

Guardas, y ya tendrás tu blockquote puesto!!
Créditos: 

No hay comentarios:

Publicar un comentario