5

Blockquote o pullquote

Esta tarde curioseando por alguno de mis blog favoritos me he encontrado en BlogU con las instrucciones para aplicar un pullquote a la plantilla.
Un pullquote es una especie de cita o nota que se añaden a los post para resaltar alguna idea o algo que queramos destacar dentro del texto.
Para lograr este efecto tan bonito hemos de andar con el CSS de la plantilla.
Localizamos esta parte en el HTML de nuestra plantilla:

.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

Y la sustituimos por esta otra:

.pullquote {
float: right;
width: 150px;
margin: 5px 5px 5px 10px;
padding: 3px 0;
font: Verdana, sans-serif;
color: #555;
text-align: center;
font-size: 1.4em;
border-top: 3px double #ccc;
border-bottom: 3px double #ccc;
}
.pullquote p {
padding: 0;
margin: 0;
}
Se puede cambiar el color del borde y del texto, modificando la parte que está destacada de otro color en el código.

Hay que colocar este otro código en cada entrada que se publique, para que sea más fácil y cómodo podemos copiarlo y pegarlo en Opciones - Formato - Caja de Plantilla de entrada, así saldrá automáticamente en cada creación de entrada, sino queremos usarlo en alguna de ellas, eliminamos el código y listo.

<blockquote class="pullquote"><p>...Texto que va dentro del pullquote...</p></blockquote>

<p>Texto del post...

Como no me apetece implementarlo en mi blog, os dejo una captura de BlogU para que os hagáis una idea de como queda...

Entradas Relacionadas:

5 comentarios:


edw2n

Saludos Rosa. ¡Gran blog (y de gran utilidad) el que tienes entre manos!

Te dejo un comentario para hacerte una consulta. He tomado buena parte del código que comentas en esta entrada para personalizar los blockquotes de mi blog, como puedes observar aquí, y quería hacer una referencia a tu blog para que figurase en tu sección "Vínculos a esta entrada", pero no lo logro. Si me pudieras echar un cable te estaría muy agradecido.

Un saludo.

Rosa

Hola edw2n, abajo de los comentarios tienes "crear un vínculo" cuando entras a través de la pestaña del menú. ¡Gracias! Voy a visitar ahora tu blog;)

edw2n

Si en "crear un vínculo" hice click... Pero no parece como vínculo a la entrada... A no ser de que tarde X tiempo en aparecer como vínculo... Eso ya no lo se :(

Miguel

Hola, Rosa. Una preguntita:

¿Cómo puedo cambiar el color de los links dentro del blockquote, para, por ejemplo, ponerlos de color blanco y que no salgan del color oscuro que tengo predefinido en mi plantilla?

Un saludo.

Rosa

Miguel Añadiendo debajo del css que ya pusiste para darles su diseño, esto:

.pullquote a {
color: #fff;
}
.pullquote a:hover{
color: #fff;
}

El a es el color a la vista y el a hover cuando pasamos el ratón, he puesto los dos blanco (#fff) cambias ahí el código del color...

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S