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(http://1.bp.blogspot.com/_yVKhLCZjGOI/S0uYAzpgvyI/AAAAAAAABGs/ytzVvt2-HHs/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
Graciela

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
Pabela

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