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
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.
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.
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.
En realidad, se puede ver a simple vista, normalmente tienen un espacio a la derecha y a la izquierda, por ejemplo:
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.
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*/
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.
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.
Únete a la Zona VIP🔥
Descubre todo el contenido que te ofrece y ser parte de mi comunidad.
Gabriela Laya
Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.