FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Personalizar blockquote

8 oct 2012
¡Hola! Vengo con un nuevo tutorial para Blogger que me pidieron varias veces ya y siempre me olvido. Me lo pidieron de nuevo y ya mismo lo estoy haciendo para no volver a olvidarme. Es sobre como personalizar el "blockquote". El blockquote es el cuadrito que aparece cuando hacen una cita como esta:


Por defecto Blogger no la muestra con otro color ni otro tipo de letra, simplemente le da un mayor margen. Hoy les enseñaré como ponerle una imagen de fondo, cambiarle la letra, etc. Así que si quieres saber como se hace, haz clic en SIGUE LEYENDO!


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. Como siempre, cualquier duda que tengan me dejan un comentario y veo como puedo ayudarlos. Un beso!

6 comentarios :

  1. Respuestas
    1. Lo pones así como está completo al código xD

      Eliminar
    2. Cata, ya lo psue en mi plantilla pero como hago para ponerlo en un entrada?

      Eliminar
    3. Seleccionas el texto que queres que quede dentro y apreta el iconito que son como unas comillitas :) Y ya está, en la entrada solo se pondrá un margen, pero cuando publiques lo verás :)

      Eliminar
  2. Cataa que plantilla tu tienes pliiis responde

    ResponderEliminar
  3. hola! emmm no me sirve D= hee intentado con MUCHAS pero no pongo eso y me sale "0 de 0" subrayado de ROJO D= ayuda!!
    me puedes encontrar en:
    8888lucita8888@gmail.com

    ResponderEliminar