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

Gabriela Laya

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