6 ene 2015

[Tutorial] Blockquote ~5~

Hiii~! Aquí estoy con otro tuto :3
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 {
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*/
}
Y listo~ ^3^ Fácil verdad?

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: *

2 comentarios: