domingo, 19 de mayo de 2013

Tutorial de como poner una BLOCKQUOTE

Hola chicas como veis he cambiado bastante el diseño de California Graphics. ¿os gusta? a mi de momento si, todavia le faltan algunos retoques... almenos ya lo tengo bastante avanzado. una de las ultimas que he añadido al HTML de mi blgog ha sido la BLOCKQUOTE. si la quereis poner en vuestro blog, lo unico que teneis que hacer es seguir el tutorial que os pondre a continuacion. este tutorial lo he sacado de Not a Single Song y me sirvio de mucho por eso ahora quiero compartirlo con vosotras y vosotros.
alla vamos:

1. Te vas a la pestaña "Plantilla" de tu blog y abres la "Edición de HTML".
2. Abres el buscador de tu explorador (CTRL+F) y allí busca "* Posts" (así con el asterisco).
3. Automáticamente debajo de ello, pegas este código que te doy:
blockquote {
background-image: url(URL de tu imagen);
padding:15px 20px 15px 20px;
color: #f0467d;
margin: 10px;
text-shadow: 0px 0px 0px;
}
blockquote:hover {
background-image: url(URL);
-webkit-border-radius: 10px 0px 0px 10px;
color: #f0467d;
text-shadow: 0px 0px 5px ;
box-shadow: 0 0 8px #afafaf;
}

Recuerden que el que pone "hover" es para cuando le pasan el ratón por encima. Los valores que pongan pueden ser los mismos o distintos. Yo les recomiendo que algunos sean distintos para que se note un cambio cuando pasan con el ratón por encima de ellos.

4. Antes de guardar los cambios puedes personalizarlo a tu gusto. Aquí te explico para que sirve cada una de esas líneas:

- background-image es el fondo de de la cita, donde pone "URL de tu imagen" pones el link de la imagen que quieres que se vea de fondo.

Pueden poner la misma imagen en ambos o una diferente. Si quieres que simplemente sea un color cambia la línea completa por "background: #ff0000;" y sólo cambias el código por el color que quieras.

-webkit-border-radius es el "radio" de las puntas, para que se vean redonditas. Hay cuatro valores, como veran porque es un para cada una de las puntas

- padding & margin te recomiendo no tocarlos, son los márgenes del blockquote, para que no se salga lo que escribes del cuadrito. Pero como siempre les digo, si quieren probar, nadie se los prohíbe.

- text-shadow&box-shadow son las sombritas del texto y la cajita de la cita respectivamente, pueden jugar con los tres valores que ahí aparecen.

Pueden ir jugando con estos valores hasta que queden como les gusten. Espero que les guste y se haya entendido.

si sigues estos pasos conseguiras tener una blockquote en tu blog, ahora si esto os lo explico yo, ivette, lo unico que tienes que hacer es:
1.- Crear una entrada

2.- Se te abrira esto:

3.- Vas en busca de esto:
y clicas en las 2 flechitas que hay. digamos en la barra de las opciones comenzando por la derecha el tercer botoncito. haces clic alli y en la ventana para escribir se te movera la linea, te recomiendo que antes de hacer alguna entrada con la blockquote que hagas una de prueba para ver si la sabes usar o no.

espero que os haya gustado el tutorial :3

3 comentarios :