Colocar comillas a los textos de las entradas

20.1.16

¡Hola! Bonito día, ya estoy por acá con otro tutorial para poner más bonitos y vistosos los textos de nuestros post. Ahora les voy a enseñar cómo personalizar el texto que va dentro de una Cita (colocarlo entre comillas) en blogger, este post me lo sugirió mi compañera bloguera +Sandra Ruiz y así que manos a la obra. El lunes publique un tutorial de cómo cambiar de color al texto en nuestros post y cambiar el tipo de letra por si se lo perdieron y quieren ir a verlo.


- Antes de iniciar como siempre *guardar una copia de la plantilla por si algo sale mal y sin problema la volvemos a instalar.

Iniciamos con el tutorial:
1. vamos a → plantilla → Editar HTML
2. buscamos ]]></b:skin> y justo antes pegamos el siguiente código:
blockquote {
background:#66CDAA; /* Color de fondo */
padding:10px;
}
blockquote:before { 
content: "\201C"; /* inicio comilla */
font-family: Georgia;
font-size:40px; /* tamaño */
font-weight: bold; line-height:0px;
color:#ffffff; /* Color  */
vertical-align:middle;
}
blockquote:after { /* final */
content: "\201D";
font-family: Georgia;
font-size:40px; /* tamaño */
font-weight: bold;
line-height:0px;
color:#ffffff; /* Color  */
vertical-align:middle;
padding-top:10px;
}
3. Clic en guardar plantilla
4. Vamos al editor de entrada y escribimos de forma normal, cuando queramos insertar el bloque entre comillas , vamos a la vista HTML y pegamos este código:
<blockquote> Escribe tu texto aquí </blockquote>
5. Regresamos a la pestaña redactar y escribimos con normalidad el texto a resaltar, el código se encargará de colocar las comillas del inicio y del final. para ver si todo funciona bien podemos ir a vista previa y se notará el bloque.

Y así es como se mira:
Este es un ejemplo de texto entre comillas, este es un ejemplo del tutotial, este es un ejemplo de texto entre comillas, este es un ejemplo del tutorial.

Ahora podemos jugar con el css y crear varios estilos
Entonces ahora que tenemos el código podemos ir jugando con las variables , el tamaño, color, color de fondo, tratando de hacer una combinación de colores para que el bloque no se mire desentonado dentro del post.


Espero que les sea de utilidad este tutorial y nos vemos en el siguiente post, un abrazo enorme ♥

más post bonitos que de seguro te van a interesar

22 comentarios

  1. Qué lindo efecto, gracias por compartir :)!

    ResponderBorrar
  2. Me faltaba lo de las comillas :) Sabía como cambiar el tipo de letra, el fondo, tamaño y demás, pero como poner "las comillas" se me escapaba XD Gracias por el post ^^

    ResponderBorrar
    Respuestas
    1. Y es que hay muchas formas de personalizar el texto de los post :) espero te sea útil.

      Borrar
  3. Al fin me pongo con este detalle en uno de mis post, y buscandote veo que me has nombrado, mil gracias. No me he dado cuenta hasta ahora porque ese perfil no lo uso... uso en de miss agenda. Pero aún asi gracias por el detalle.
    Hoy no he conseguido poner las comillas, porque no me sale en mi plantilla ]]>, no se si lo he borrado o que ha sucedido. pero aun asi, muchas gracias!

    ResponderBorrar
    Respuestas
    1. Hola, bueno ahora ya sé cual usas jeje, pues puedes pegar el código igual arriba de no creo que te de problema y si te da pues pega ]]> en tu plantilla :)

      Borrar
  4. ¿es posible cambiar el color de las comillas en cada entrada del blog?

    ResponderBorrar
    Respuestas
    1. Hola, no, no es posible porque el código que se coloca en la plantilla se aplicar a todas las entradas, no se puede editar una por aparte.

      Borrar
  5. ¡Qué guapa eres! Justamente iba buscando este tutorial, gracias por compartirlo!!

    ResponderBorrar
  6. He seguido todos los pasos pero sigue sin salirme las comillas. No sé qué me falta.

    ResponderBorrar
  7. Ah vale ya está! Era que en la entrada no salían las comills pero sí al pulicar

    ResponderBorrar
    Respuestas
    1. ¡hola! Qué bien diste con el dato :D en el post indico que puedes ver como van quedando las comillas en vista previa :)

      Borrar
    2. Soy un desastre!! Jajajaj esperaba a que se viera desde la entrada :)

      Una pregunta Wendy, perdona que no sea sobre este tutorial, el aspecto nuevo del gadget de seguidores me da error cuando quiero seguir a alguien, ¿qué me aconsejas?

      Un abrazo

      Borrar
    3. ¡Hola de nuevo! fíjate que lo único que puedo aconsejarte es que por ahora si te da error en gadget entonces intenta seguir a blogs por medio de sus newsletter o feedburner que de seguro por alguna parte tienen el formulario para que te apuntes, quizá al ser nuevo el aspecto esta dando varios problemas lo único que queda es esperar unos días para que los de blogger arreglen los errores.

      Borrar
    4. Sí, acabo de informar desde el foro de ayuda a ver si lo solucionan pronto!!

      Muchísimas gracias por tu ayuda :)

      Un abrazo

      Borrar
  8. Hola
    Te acabo de descubrir y esto de las comillas gigantes como yo las llamo me encanta. Lo he puesto en práctica en mi blog, ahora que está en reformas hago cambios de este tipo.
    Eso sí, no me funcionaba antes de ]]> . Lo que he hecho en pegarlo debajo de /* Posts y listo!!!

    Muchas gracias por el post. Besotes molones.

    ResponderBorrar
  9. Gracias por el tutorial, queda muy bonito! Espero más tutoriales, me encantan

    ResponderBorrar
  10. Hola! Muchas gracias por el tutorial, me sirvió mucho para mi blog :) Me quedo por acá, ¡saludos!

    ResponderBorrar
  11. No es la primera vez que visito tu blog y me encanta. Me surge la duda de cómo hacer si quieres personalizar aún más el bloque de texto citado poniendo por ejemplo una imagen superpuesta (en mi caso la de un washitape), pues con el código que vi en otro sitio no me funciona. Eso sí, he logrado personalizar yo sola la primera letra, poniéndola como letra capital je je.
    Un saludo.
    P.D.: me llama la atención que a pesar de lo profesional que es tu blog no cuente con un buscador. Facilitaría mucho la tarea al visitante.

    ResponderBorrar
    Respuestas
    1. Hola, hola :D Ufff, ahora no me da la cabeza para ver cosas de códigos, he cambiado de oficio jejeje, ahora tengo una tienda online ..... Ya te hice caso, he puesto un buscador (eso sí todo feo pero hace su función correctamente)

      Borrar
  12. Muchísimas gracias por el tutorial <3 Ya usé otro que subiste para por ahora arreglar algo que no me gustaba de mis entradas y seguramente revise aquí seguido cuando le haga la reforma completa, jeje. Me estaré quedando por aquí. Saludos! ^^

    ResponderBorrar

Gracias por tus comentarios

20.1.16

Colocar comillas a los textos de las entradas

¡Hola! Bonito día, ya estoy por acá con otro tutorial para poner más bonitos y vistosos los textos de nuestros post. Ahora les voy a enseñar cómo personalizar el texto que va dentro de una Cita (colocarlo entre comillas) en blogger, este post me lo sugirió mi compañera bloguera +Sandra Ruiz y así que manos a la obra. El lunes publique un tutorial de cómo cambiar de color al texto en nuestros post y cambiar el tipo de letra por si se lo perdieron y quieren ir a verlo.


- Antes de iniciar como siempre *guardar una copia de la plantilla por si algo sale mal y sin problema la volvemos a instalar.

Iniciamos con el tutorial:
1. vamos a → plantilla → Editar HTML
2. buscamos ]]></b:skin> y justo antes pegamos el siguiente código:
blockquote {
background:#66CDAA; /* Color de fondo */
padding:10px;
}
blockquote:before { 
content: "\201C"; /* inicio comilla */
font-family: Georgia;
font-size:40px; /* tamaño */
font-weight: bold; line-height:0px;
color:#ffffff; /* Color  */
vertical-align:middle;
}
blockquote:after { /* final */
content: "\201D";
font-family: Georgia;
font-size:40px; /* tamaño */
font-weight: bold;
line-height:0px;
color:#ffffff; /* Color  */
vertical-align:middle;
padding-top:10px;
}
3. Clic en guardar plantilla
4. Vamos al editor de entrada y escribimos de forma normal, cuando queramos insertar el bloque entre comillas , vamos a la vista HTML y pegamos este código:
<blockquote> Escribe tu texto aquí </blockquote>
5. Regresamos a la pestaña redactar y escribimos con normalidad el texto a resaltar, el código se encargará de colocar las comillas del inicio y del final. para ver si todo funciona bien podemos ir a vista previa y se notará el bloque.

Y así es como se mira:
Este es un ejemplo de texto entre comillas, este es un ejemplo del tutotial, este es un ejemplo de texto entre comillas, este es un ejemplo del tutorial.

Ahora podemos jugar con el css y crear varios estilos
Entonces ahora que tenemos el código podemos ir jugando con las variables , el tamaño, color, color de fondo, tratando de hacer una combinación de colores para que el bloque no se mire desentonado dentro del post.


Espero que les sea de utilidad este tutorial y nos vemos en el siguiente post, un abrazo enorme ♥
Share to Facebook Share to Pinterest

22 comentarios:

  1. Qué lindo efecto, gracias por compartir :)!

    ResponderBorrar
  2. Me faltaba lo de las comillas :) Sabía como cambiar el tipo de letra, el fondo, tamaño y demás, pero como poner "las comillas" se me escapaba XD Gracias por el post ^^

    ResponderBorrar
    Respuestas
    1. Y es que hay muchas formas de personalizar el texto de los post :) espero te sea útil.

      Borrar
  3. Al fin me pongo con este detalle en uno de mis post, y buscandote veo que me has nombrado, mil gracias. No me he dado cuenta hasta ahora porque ese perfil no lo uso... uso en de miss agenda. Pero aún asi gracias por el detalle.
    Hoy no he conseguido poner las comillas, porque no me sale en mi plantilla ]]>, no se si lo he borrado o que ha sucedido. pero aun asi, muchas gracias!

    ResponderBorrar
    Respuestas
    1. Hola, bueno ahora ya sé cual usas jeje, pues puedes pegar el código igual arriba de no creo que te de problema y si te da pues pega ]]> en tu plantilla :)

      Borrar
  4. ¿es posible cambiar el color de las comillas en cada entrada del blog?

    ResponderBorrar
    Respuestas
    1. Hola, no, no es posible porque el código que se coloca en la plantilla se aplicar a todas las entradas, no se puede editar una por aparte.

      Borrar
  5. ¡Qué guapa eres! Justamente iba buscando este tutorial, gracias por compartirlo!!

    ResponderBorrar
  6. He seguido todos los pasos pero sigue sin salirme las comillas. No sé qué me falta.

    ResponderBorrar
  7. Ah vale ya está! Era que en la entrada no salían las comills pero sí al pulicar

    ResponderBorrar
    Respuestas
    1. ¡hola! Qué bien diste con el dato :D en el post indico que puedes ver como van quedando las comillas en vista previa :)

      Borrar
    2. Soy un desastre!! Jajajaj esperaba a que se viera desde la entrada :)

      Una pregunta Wendy, perdona que no sea sobre este tutorial, el aspecto nuevo del gadget de seguidores me da error cuando quiero seguir a alguien, ¿qué me aconsejas?

      Un abrazo

      Borrar
    3. ¡Hola de nuevo! fíjate que lo único que puedo aconsejarte es que por ahora si te da error en gadget entonces intenta seguir a blogs por medio de sus newsletter o feedburner que de seguro por alguna parte tienen el formulario para que te apuntes, quizá al ser nuevo el aspecto esta dando varios problemas lo único que queda es esperar unos días para que los de blogger arreglen los errores.

      Borrar
    4. Sí, acabo de informar desde el foro de ayuda a ver si lo solucionan pronto!!

      Muchísimas gracias por tu ayuda :)

      Un abrazo

      Borrar
  8. Hola
    Te acabo de descubrir y esto de las comillas gigantes como yo las llamo me encanta. Lo he puesto en práctica en mi blog, ahora que está en reformas hago cambios de este tipo.
    Eso sí, no me funcionaba antes de ]]> . Lo que he hecho en pegarlo debajo de /* Posts y listo!!!

    Muchas gracias por el post. Besotes molones.

    ResponderBorrar
  9. Gracias por el tutorial, queda muy bonito! Espero más tutoriales, me encantan

    ResponderBorrar
  10. Hola! Muchas gracias por el tutorial, me sirvió mucho para mi blog :) Me quedo por acá, ¡saludos!

    ResponderBorrar
  11. No es la primera vez que visito tu blog y me encanta. Me surge la duda de cómo hacer si quieres personalizar aún más el bloque de texto citado poniendo por ejemplo una imagen superpuesta (en mi caso la de un washitape), pues con el código que vi en otro sitio no me funciona. Eso sí, he logrado personalizar yo sola la primera letra, poniéndola como letra capital je je.
    Un saludo.
    P.D.: me llama la atención que a pesar de lo profesional que es tu blog no cuente con un buscador. Facilitaría mucho la tarea al visitante.

    ResponderBorrar
    Respuestas
    1. Hola, hola :D Ufff, ahora no me da la cabeza para ver cosas de códigos, he cambiado de oficio jejeje, ahora tengo una tienda online ..... Ya te hice caso, he puesto un buscador (eso sí todo feo pero hace su función correctamente)

      Borrar
  12. Muchísimas gracias por el tutorial <3 Ya usé otro que subiste para por ahora arreglar algo que no me gustaba de mis entradas y seguramente revise aquí seguido cuando le haga la reforma completa, jeje. Me estaré quedando por aquí. Saludos! ^^

    ResponderBorrar

Gracias por tus comentarios