SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

26 feb. 2014

Personaliza la Cita / Quote de tus Entradas.

¿Qué tal?
Bueno hace unos díitas estaba por Facebook mirando cosillas y publicando otras y me llegó un mensaje privado de una chica con el nombre de Alice Twisaga Twivampdiaries (espero que no lea mi opinión sobre Crepúsculo ajajajajajja, es broma)
Preguntándome sobre si se podía personalizar, cambiar, quitar el quote de una entrada.

¿Qué es el quote?
Es Citar, cuando citamos algo que no es nuestro, o una conversación, vamos lo que es citar de toda la vida, que sale más a un ladito y a veces remarcado o en un cuadrito.
Le dije que sí, como siempre, ¿por qué no voy a ayudaros? pues bueno, vamos al lio.

Para poner un quote tenemos que escribir una entrada como hacemos siempre y seleccionar el texto que queremos marcar como cita. Luego hacemos clic a las comillas que hay arriba a la derecha del editor de texto de la entrada.



Al hacerlo veremos que el texto, como se ve en la foto, se mete para la derecha.
Ya tenemos la cita creada, pero lo mas importantísimo:
¿Cómo personalizo el cuadrito que saldrá luego en el blog para que no sea feo?
Pues nos vamos a Plantilla y Editar HTML (hacer la copia ya lo sabéis, siempre por si metemos la pata)

Una vez ahí desplegamos el artilugio de CSS que ya sabéis cuál es. El que está entre <skin> y </skin>, hacemos click en el texto del código y apretamos CTRL y F a la vez. En la cajita de buscar pegamos lo siguiente:

.blockquote
#blockquote
post. blockquote

UNA DE ESTAS TRES, porque estas tres son las maneras en las que puede aparecer en vuestra plantilla. Si os sale, bajar ya a la parte de personalizar el código.

¿No sale? pues lo añadiremos, nos vamos al final de nuestra plantilla, aunque ahora con lo que sabéis podéis diferenciar cada parte del código CSS y podéis ponerlo donde queráis. Pero vamos a ir a lo seguro.
Buscáis esto en vuestra plantilla:

]]></b:skin>

Y justo encima pegáis el código de personalizar el quote:

blockquote {
background: #EBB8CC url() top left no-repeat;
padding: 5px 15px 10px 32px;
margin: 10px 15px 3px 3px;
width: 600px;
border-top: 1px dashed #C6829C;
border-right: 1px dashed #C6829C;
border-left: 1px dashed #C6829C;
border-bottom: 1px dashed #C6829C;
font-style: normal;
}

Este es mi código y os saldrá así:

Para personalizároslo, os explico cada parte del código así podréis ponerlo como más os guste:

blockquote {
background: #EBB8CC url() top left no-repeat;
  --->Color de fondo, si queréis un color solo tenéis que cambiar lo que aparece en ROJO. Si queréis una imagen de fondo, poned la URL de la imagen entre los paréntesis () que hay después de url sin borrar nada, sólo metiendo ahí la url.

padding: 5px 15px 10px 32px;
margin: 10px 15px 3px 3px;
---> no lo toquéis es el margen y la ubicación del texto dentro del cuadrito. Si queréis podéis tocarlo e ir probando a ver cómo os gusta más.

width: 600px; ---> esto es el ancho que queréis que tenga el quote, sin esto ocupará todo el ancho de la entrada. Cambiar sólo el numerito.

border-top: 1px dashed #C6829C;
border-right: 1px dashed #C6829C;
border-left: 1px dashed #C6829C;

border-bottom: 1px dashed #C6829C; ---> Todos estos border son el marco o borde que enmarcan la cita, para cambiar el color cambiar lo que aparece en ROJO, sólo el número y letras. Esto # no lo toquéis.
Donde dice dashed, es lo que os enseñé en el tutorial de Pon y personaliza el borde de tu blog. Echadle un vistazo si no os acordáis. Cambiar sólo la palabra dashed por el tipo de marco que os guste más.
Donde dice 1px es lo ancho o gordo que saldrá el borde, si lo queréis mas gordito pondréis 2 o 3 px, id probando.

font-style: normal; ---> estilo de la fuente, letra, si la queréis normal pues dejais el normal, si la queréis cursiva pues poned italic, en negrita pues bold...y así.

} ---> no lo toquéis esto cierra el código

Si no queréis que se vea nada, pues el truquito de momento es ponerle de color de fondo el mismo color que vuestro fondo de donde publicáis la entrada, el color blanco es #FFFFFF.
En los bordes con que pongáis 0px ya no se verán bordes. Y así solamente os saldrá el texto más metido a la derecha pero sin ningún marco ni color ni nada.

Espero que os haya gustado y que podais personalizar sin problemas el Quote de vuestro Blog.
Muah!

31 comentarios:

  1. Ni idea de que existía esto, gracias. Besos.

    ResponderEliminar
  2. El quote personalizado da mucho juego a las entradas; yo también lo tunneé :P
    Buen post :)

    Bss
    *Tunneando Blogger

    ResponderEliminar
  3. Es genial , yo tampoco sabia ni que se podía hacer esto, un saludo

    ResponderEliminar
  4. Dios, muchísimas gracias. Llevaba mucho tiempo queriendo encontrar un tutorial donde me explicaran lo que acabas de explicar. Te amo!!! Besos!!

    ResponderEliminar
    Respuestas
    1. Aunk no consigo que funcione en mi blog :'(

      ¿Que problema tengo?

      Eliminar
    2. Pues dime mas cositas para ayudarte!!! a ver
      Tu pega esto:

      blockquote {
      background: #EBB8CC url() top left no-repeat;
      padding: 5px 15px 10px 32px;
      margin: 10px 15px 3px 3px;
      width: 600px;
      border-top: 1px dashed #C6829C;
      border-right: 1px dashed #C6829C;
      border-left: 1px dashed #C6829C;
      border-bottom: 1px dashed #C6829C;
      font-style: normal;
      }

      justo encima de ]]>< /b:skin > (sin los espacios)

      Y luego haz la prueba a ver si sale, pon algún quote. Si eso ya no te sale miraremos via mail a ver si puedo ayudarte.

      Eliminar
    3. Hola Lireth no me funciona en mi blog :( hice todos los pasos que mencionaste busque ]]>< /b:skin > y justo encima pegue el código que esta ahi, borre los espacios y tanpoco funciona.. no se que le paso :( xfis ayúdame!
      :(

      Eliminar
    4. Jajaja vale... creo que es culpa mía. Mira en la primera línea de texto me dejé un punto, debería ser así la primera línea :
      .blockquote {

      Luego ya el resto y tiene que ir por narices, si no te funciona te digo lo que a todas, hazme administradora de tu blog agregando lirethnotebook@gmail.com y cuando acepte me das permisos de administradora y te lo arreglo cuando tenga un rato. Sobretodo cuando tenga un rato porque estoy de vacaciones pero solo del blog porque sigo trabajando :(

      Espero que con ese arreglito ya funcione. Besotes :)

      Eliminar
  5. Jjajajaj se que a muchos no les gusta Crepúsculo y lo respeto totalmente, ademas ese facebook me lo cree cuando estaba a full con la fiebre Twilighter.

    PD: De nuevo muchas gracias por ayudarme y con tanta prisa! :)

    ResponderEliminar
  6. Hecho, muchas graciassssssssssss :O

    ResponderEliminar
  7. Se me olvidaba, siempre he querido personalizar un poco los comentarios, hay gente que pone algún texto o incluso una imagen del autor, nos ponemos pedigueñas ¡eh!. Gracias por todo guapisima.

    ResponderEliminar
    Respuestas
    1. Quieres decir un texto como el que tengo yo? ¿algo así?

      Más adelante tenia pensado hacer un tutorial de Cómo personalizar la pagina de los comentarios añadiendo un texto como el mio.

      Eliminar
  8. Te envié una preguntita en otro post. Por siaca, te la planteo aquí: ¿Cómo introduzco en la plantilla de los comentarios emoticonos? Me encantaría saberlo.
    Bss y enhorabuena por el blog

    ResponderEliminar
    Respuestas
    1. Claro que si. Si me pasas un correo, te mando la explicación. Es muy largo de explicar.
      Para las demás haré un Tutorial por si os lo queréis poner.
      Muah! :k

      Eliminar
  9. Fíjate tú que yo no entendía pa'qué tenían que poner una tecla de comillas......si es que.......
    Gracias reina..... si no nos iluminadas.......

    ResponderEliminar
  10. Acabo de encontrarte y ya estoy aprendiendo un montón. Muchas gracias!!

    ResponderEliminar
  11. ¡Olé! , es justo lo que estaba buscando para el blog de la Asociación de Mujeres Emprendedoras a la que pertenezco, precisamente soy la encargada de hacer el blog ... De nuevo ¡Gracias !

    Un Abrazo

    ResponderEliminar
  12. Lireth, muchas gracias, super fácil, ha salido a la primera. Pero tengo una pregunta, lo he puesto con un color de fondo, digamos que azul, si yo la semana que viene le cambio el color, lo que ya está publicado cambia del color azul al nuevo?

    ResponderEliminar
  13. Graciaas ;) Me ha servido de mucha ayuda. Ya lo tengo personalizado.
    Besos!

    ResponderEliminar
  14. No me funciona en mi blog, no encuentro esto ]]>< /b:skin >, y tampoco aparece esto .blockquote #blockquote post. blockquote, está genia tu post y el blog, muy lindo !! Gracias :)

    ResponderEliminar
    Respuestas
    1. No aparece el .blogquote porque tienes que añadirlo tu al código CSS.
      Lee otros comentarios de más arriba para contestarte. Sigue el tutorial al pie de la letra y para saber qué es y dónde esta el código CSS tienes los cursos gratuitos.
      Un beso :)

      Eliminar
  15. ¡Te amo infinitamente! No sabes cuanto tiempo he intentando ponerlo y no me funcionaba, me estaba volviendo loca ya. ¡Muchísimas gracias! :D

    ResponderEliminar
  16. No me sale :( ya le he agregado todo, pero nada :'(

    ResponderEliminar
  17. No me funciona :( no me sale nada y cuando agrego el código tampoco funciona

    ResponderEliminar
  18. Muchas gracias, me sirvió de mucho como siempre lo hacen tus tutoriales ;)
    Besos! ^^

    ResponderEliminar
  19. ¡Hola!

    No me funciona. Bueno, sí. Si lo pongo me sale lo rosa, pero cuando lo quiero modificar no me deja. ¿Qué puede pasar?

    ¡Un beso!

    ResponderEliminar
  20. No me sale... Creo que es problema de mi plantilla, ¿qué podría hacer?

    ResponderEliminar
  21. Lo puedo hacer todo pero cuando le doy al botón de la cita me sale justo arriba las dos comitas... ¿Cómo puedo eliminarlo?

    ResponderEliminar