Bueno, el tuto de hoy es sobre el blockquote que he puesto en la plantilla nueva, la Template~Candy!
Me encanta este blockquote es super kawaii y fácil de poner~! Y al pasar el cursor cambia de color :3
Bueno, este es el blockquote del que hablo!
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:
@font-face {Y listo~ ^3^ Fácil verdad?
font-family: "Five";
src: url('http://static.tumblr.com/jecwjgj/Dw3n1m560/text_five.ttf');
}
blockquote {
font-family: Five; /*Nombre de Tipo de Letra*/
font-size: 10px; /*Tamaño de Letra*/
color: #fff; /*Color de Letra*/
text-align: center; /*Texto centrado (Center=Centro ; Right=Derecha ; Left=Izquierda)*/
box-shadow: inset 0 0 22px #fbb5b5, 0 0 6px #fbb5b5; /*Colores de sombra del blockquote*/
background: #fecccc; /*Color de fondo*/
padding: 8px;
-webkit-transition-duration: .50s;
border-radius:10px /*Bordes redondeadas*/
}
blockquote:hover {
font-family: Five; /*Nombre de Tipo de Letra*/
font-size: 11px; /*Tamaño de Letra*/
color: #ffb7bb; /*Color de Letra*/
text-align: center; /*Texto centrado*/
box-shadow: inset 0 0 22px #8aeee5, 0 0 6px #8aeee5; /*Colores de sombra del blockquote*/
background: #aef6ef; /*Color de fondo*/
padding: 8px;
-webkit-transition-duration: .50s;
border-radius:10px /*Bordes redondeadas*/
}
Luego para ponerlo en una entrada solamente tienes que clicar en este botón de Cita:
Al darle se te pondrá el texto mas hacia adentro de la entrada, y al mirar en Vista Previa veras el blockquote!
Y eso es todo~! Cualquier duda me dicen ^^
Créditos: *
Gracias por el tutorial :),besos ^3^
ResponderEliminarDe nada, espero que te sirva!
Eliminar