Personalizar el Blockquote o Texto Citado en tu Blog

Aprende a personalizar el Blockquote o Texto Citado en tu blog de Blogger o WordPress de manera fácil, rápida y sencilla.

¡Hola! Bienvenido a Peengler, soy Gabriela. En este post te explico sobre el texto citado, cómo lo puedes personalizar a tu gusto y además te dejare varios ejemplos que puedes usar.

Sin más que decir ¡Empecemos!

Clic en la imagen para ver el tutorial en YouTube

¿Qué es el Blockquote?

El Blockquote o texto citado, es una etiqueta del HTML que se usa para escribir una cita textual o para diferenciar un párrafo del resto de tu contenido.

En el HTML se suele abrir <Blockquote> y cerrar </Blockquote> de esa manera, y todo lo que este dentro de él, se verá diferente del texto.

Cómo insertar el Blockquote o texto citado en Blogger

Hay dos maneras de hacerlo, la primera es escribir el párrafo y luego de subrayarlo dale clic al botón cita, como lo vez a continuación:

como insertar el Blockquote o texto citado en Blogger

La segunda manera es lo contrario al anterior, es decir, primero clic en el botón cita y luego escribes.

Cómo insertar el Blockquote o texto citado en WordPress

Si usas el editor clásico el botón de cita usa unas comillas, si usas el editor nuevo, simplemente añade un bloque de cita.

Como insertar el Blockquote o texto citado en WordPress

Cómo saber si mi texto tiene Blockquote o un texto citado

En realidad, se puede ver a simple vista, normalmente tienen un espacio a la derecha y a la izquierda, por ejemplo:

texto citado en el blog

Cómo personalizar el Blockquote o texto citado

Lo bueno es que no es necesario tocar nada del HTML al menos que tenga algún elemento extra, por ejemplo, la imagen del autor. Ahora si es para añadirle algún color solo necesitaras los estilos CSS.

Si quieres intentar con este simple estilo de añadir un borde a la izquierda.

blockquote o texto citado con borde

Para esto, copia y pega el siguiente código en el CSS de tu blog.

Blogger: Te vas a Tema > editar HTML > CTRL + F (para la casilla de búsqueda) e ingresa ]]></b:skin> arriba de este pegas el CSS.

WordPress: Necesitaras instalar y activar el siguiente plugin: Code Snippets. Luego clic en todos los fragmentos > Activar el CSS > y dentro de los <style> pegas el CSS.

CSS

blockquote {
    position: relative;
    padding-left: 1em;
    border-left: 0.2em solid #4d91b3;
    font-family: 'Roboto', serif;
    font-size: 18px;
    line-height: 1.5em;
    font-weight: 100;
}
/* LAS COMILLAS (OPCIONAL)*/
blockquote:before, blockquote:after {
    content: '\201C';
    color: #4d91b3;
    font-size: 33px;
}

blockquote:after {
  content: '\201D';
} 
/* FIN DE LAS COMILLAS*/

5 Ejemplos de Blockquote o texto citado

Para obtener los códigos, regístrate o inicia sesión en la Zona VIP. Luego te ubicas en Blockquote, allí veras todas las entradas disponibles.

Blockquote con doble comillas en las esquinas

blockquote o texto citado ejemplo

Ver Código

Blockquote con comilla y borde izquierdo

blockquote con borde

Ver Código

Blockquote Elegante

blockquote elegante

Ver Código

Texto citado al estilo burbuja

blockquote como burbuja

Ver Código

Texto citado – bocadillo

blockquote como burbuja en la izquierda

Ver Código

En conclusión

Aplicar un Blockquote a un párrafo para que sea llamativo, es buena idea aplicarlo, aunque en la práctica, a veces no se suele usar para un texto citado sino para una idea, sugerencia o consejo.

Personalmente no tengo nada en contra de cómo lo uses, aunque si necesitas es mostrar bloques para dar un aviso o una alerta. Hay otras maneras que puedes aplicar para estos bloques sin necesidad de usar una cita.

¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Citu:

Uy muchas gracias, son muy útiles tus consejos. Te mando un beso

Responder
    Gabriela Laya:

    Hola citu, de nada gracias por tu visita 😀

    Responder
Kat:

Hola linda! Ay me encanta la estética de los ejemplos de blockquote que nos enseñas, no sé por cual me decantaría! Tal vez por alguno de los tres primeros 🙂 Yo apenas uso este recurso, pero me encanta el toque que da a los post tal vez debería usarlo más pero antes voy a personalizarlo con las comillas, mil gracias por compartir el tutorial y el CSS. Un abrazo!!

PD: Sii agregué más páginas al menú de mi blog para hacer la navegación más cómoda, te fijaste! Jaja

Responder
    Gabriela Laya:

    Hola Kat, te entiendo a mi me pasa mucho tantos estilos y solo debes elegir uno 😭 pero ni modo.

    A para que veas que si me pongo a detallar jajaja

    Responder
Yomi MR:

Hola, muchas gracias por los concejos y los códigos, uf, a mí me encanta hacer los blockquotes bonis porque meto muchas citas de los libros ja, ja, ja, tendré en cuenta estos códigos 😀
¡Besos! :3

Responder
    Gabriela Laya:

    Hola Yomi MR, Me alegro que te gustaran lo más seguro es que siga subiendo más estilos 🙂

    Responder
Maria Eugenia ARIAS LOZANO:

Pues me viene genial, esto no lo sabía. Buen fin de semana!!

Responder
    Gabriela Laya:

    Hola Maria, me alegro que sea útil 🙂

    Responder
Rocío:

Como siempre, es una delicia pasar por tu blog, aprender y luego aplicarlo. Así hacemos cosas mejores.
Un abrazo, Gabriela.

Responder
    Gabriela Laya:

    Hola Rocío, de nada querida, cualquier duda me puedes preguntar 🙂

    Responder
Asunción Artal:

Una información realmente útil, gracias y buen fin de semana

Responder
    Gabriela Laya:

    Hola Asunción Artal, gracias por tu comentario 🙂

    Responder
El desvan de vicensi:

Muy interesante la lección de hoy Gabriela. La pondre en practica. Un beso y feliz finde.

Responder
    Gabriela Laya:

    Hola querida, de nada 🙂

    Responder
Kinga:

Q lindas opciones de citar ❤

Responder
    Gabriela Laya:

    Hola Kinga, si y todavia faltan más XD

    Responder
Celia | Miles de Libros:

¡Hola, hola!

Me ha encantado esta entrada. No sé si lo pondré en práctica porque no suelo añadir citas en mis reseñas pero guardo el enlace en favs por si en el futuro me animo.

Mil besos,
Celia | 1000 LIBROS blog.

Responder
    Gabriela Laya:

    Hola Celia, cuando quieras no hay apuro 🙂

    Responder
Sakuya Aikawa:

(ノ◕ヮ◕)ノ*:・゚✧ Holaaa!!!
Ya sabía lo de la personalización del Blockquote pero nunca está demás esta ayudita para los que contamos con blogger
aunque tu código es más pequeño que el que yo uso jajajaja, gracias por compartirlo y por la explicación siempre son buenas
para la gente nueva.

Responder
    Gabriela Laya:

    Hola Sakuya Aikawa, ya me dio curiosidad con tu código, la verdad es que si son cortos XD
    Gracias.

    Responder
Carolina g. Ticala:

Very nice post ! Thanks for stopping for my blog ! Have a great week! 🎀🎀🎀

Responder
    Gabriela Laya:

    Hola Carolina, de nada 🙂

    Responder
JLO:

Parece algo tan sencillo y no lo sabía!! Además soy de poner frases en mi blog, gracias! y saludos

Responder
    Gabriela Laya:

    Hola JLO, para que veas que no todo es difícil XD

    Responder
Joanna:

No lo sabía. Gracias por la información.

Besos

Responder
    Gabriela Laya:

    Hola Joanna, de nada guapa 🙂

    Responder