Blockquote (bloque entrecomillado)


Hoy vamos a ver cómo agregar un blockquote o bloque entrecomillado, que sirve para resaltar alguna cita textual o un párrafo en particular.

En futuros post veremos más estilos para nuestro blockquote; hoy veremos cómo añadirlo a nuestro blog (si es que no lo tiene) o cambiarlo un poco.

1.§ Ingresamos a Diseño/ Edición de HTML y con ayuda de CTRL+F buscamos:

blockquote {
margin:.5em 0;
}

El contenido (margin:.5em 0;) no tiene que ser necesariamente igual, lo importante es que exista el blockquote.

» Si no lo encontramos, entonces puede que en nuestro blog esté con este nombre:

.post blockquote {
margin:.5em 0;
}

Cualquiera de los dos es igualmente válido.

2.§ Si es que tenemos el código, podemos personalizarlo un poco, sustituyéndolo por:



blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFR-A22l4o-t0ALRkNQM0Q6x71lWaUJz8tDugDiDsfQVInqKLAUPSzMwQLJMwKeTSEr7hRgCA5EmR4DPyBllRFc3oXSDu0iQ597rQxuFB9X0jOZoqvTRek56MmVQ9xVz_0Hx2Y1OHEjpM/s400/blocknaran.png)repeat-y ;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
font-size: 0.9em;
}

Si es que en nuestro blog no existe el blockquote { o .post blockquote { entonces podemos añadir el código debajo de:

/* Posts
----------------------------------------------- */

3.§ Damos click a Guardar.

4.§ Cada vez que queramos usarlo, podemos agregar <blockquote>Texto-Texto-Texto</blockquote> o sino usar el botón que está en el editor de entradas:

En futuros post veremos más formas de personalizar nuestro Blockquote.

15 opinaron:

G

A personalizar los blockquotes :)

Responder
Yessmi

Vaya, no sabía que esa parte se llamaba blockquote; muy útil el post :)

Responder
La inquisidora

Mi blog vino con un blockquote, pero lo voy a modificar.

Besitos

Responder
Unknown

Excelente como lo explicas tesoro :)

Buena semana y nos vemos :D

Responder
Jéssica YK

» G:
Sí, luego veremos más formas :)

» Yessmi:

Gracias :)

S@lu2

Responder
Jéssica YK

» La inquisidora:
Y si necesitas ayuda, me avisas.

» Graciela:
Gracias por la visita:) siempre es un gusto tenerte por el blog.

S@lu2

Responder
Vku

Hola Jessica.
Ojo que la ultima imagen muestra el boton de link y no de blockquote

Responder
Jéssica YK

» Vku:

Gracias por la observación; me confundí y cargué otra imagen que no era para este post.

S@lu2

Responder
Anónimo

Good brief and this post helped me alot in my college assignement. Gratefulness you as your information.

Responder
Jéssica YK

» Anónimo:
Thanks for your visit :)

S@lu2

Responder
Paula Lago

Wa!!! gracias por el dato!, hacía mil años que en la plantilla de mi blog quería poner algo así porque no aparecía nada cuando incertaba una cita. ;)

Responder
Jéssica YK

» Pabela:
Sí, lo vi en tu blog y quedó muy bien :)

S@lu2

Responder
Obed

Hola disculpa no sabes porque el fondo de las letras sigue siendo blanco aunque se lo cambie?

te dejo el link de mi blog de pruebas
http://pruebasawesome.blogspot.com/2011/10/one-more-day.html

Responder
Obed

Ya resolví el problema Gracias.

Responder
Jéssica YK

» Obed:

Qué bueno!

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio