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:

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.

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:

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.

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.

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

Ver Código

Blockquote con comilla y borde izquierdo

Ver Código

Blockquote Elegante

Ver Código

Texto citado al estilo burbuja

Ver Código

Texto citado – bocadillo

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.