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.
Uy muchas gracias, son muy útiles tus consejos. Te mando un beso
Hola citu, de nada gracias por tu visita 😀
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
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
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
Hola Yomi MR, Me alegro que te gustaran lo más seguro es que siga subiendo más estilos 🙂
Pues me viene genial, esto no lo sabía. Buen fin de semana!!
Hola Maria, me alegro que sea útil 🙂
Como siempre, es una delicia pasar por tu blog, aprender y luego aplicarlo. Así hacemos cosas mejores.
Un abrazo, Gabriela.
Hola Rocío, de nada querida, cualquier duda me puedes preguntar 🙂
Una información realmente útil, gracias y buen fin de semana
Hola Asunción Artal, gracias por tu comentario 🙂
Muy interesante la lección de hoy Gabriela. La pondre en practica. Un beso y feliz finde.
Hola querida, de nada 🙂
Q lindas opciones de citar ❤
Hola Kinga, si y todavia faltan más XD
¡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.
Hola Celia, cuando quieras no hay apuro 🙂
(ノ◕ヮ◕)ノ*:・゚✧ 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.
Hola Sakuya Aikawa, ya me dio curiosidad con tu código, la verdad es que si son cortos XD
Gracias.
Very nice post ! Thanks for stopping for my blog ! Have a great week! 🎀🎀🎀
Hola Carolina, de nada 🙂
Parece algo tan sencillo y no lo sabía!! Además soy de poner frases en mi blog, gracias! y saludos
Hola JLO, para que veas que no todo es difícil XD
No lo sabía. Gracias por la información.
Besos
Hola Joanna, de nada guapa 🙂
Deja un comentario