18

Entre comillas

Una bonita forma de resaltar un texto en una entrada.
Es muy sencillo de implementar en nuestro blog, solamente hemos de añadir unas líneas en el CSS de la plantilla:

blockquote {
text-indent: 25px;
background: url(URL DE IMAGEN DE NUESTRAS COMILLAS);
background-position: 0 2px;
background-repeat: no-repeat;
}

Guardamos cambios.

Cada vez que deseemos hacer uso de las comillas hemos de añadir esto al editar nuestra entrada:

<blockquote> AQUÍ EL TEXTO QUE VA ENTRE COMILLAS</blockquote>

Aunque lo más fácil es selecionar el texto que queremos incluir entre comillas y pinchar en el botoncito con las comillas del editor de entradas, el resultado es el mismo que haciéndolo a mano.

Como os digo siempre, podemos "moldear" el CSS a nuestro gusto, el color, el tipo de fuente, la distancia al texto de las comillas...
Encontraréis muchas imágenes de comillas en Google, simplemente escogemos buscar imágenes y poniendo "comillas gif" os saldrán algunas como estas de mi blog de pruebas, eso si, no escojáis unas comillas demasiado grandes, si no queréis andar retocando el CSS :



Si queremos conseguir el efecto de las comillas delante y detrás de nuestro texto, es decir, comillas de apertura y cierre, añadimos esto en el CSS de la plantilla:

blockquote {
text-indent: 25px;
background: url(URL DE IMAGEN DE COMILLAS DE APERTURA);
background-position: 0 2px;
background-repeat: no-repeat;
}
blockquote p {
display: inline;
margin: 0;
padding-right: 24px;
background: url(URL DE IMAGEN DE COMILLAS DE CIERRE);
background-position: bottom right;
background-repeat: no-repeat;
}

Cada vez que deseemos hacer uso de las comillas hemos de añadir esto al editar nuestra entrada:

<blockquote><p> AQUÍ EL TEXTO QUE VA ENTRE COMILLAS</p></blockquote> o pegarlo en plantilla-opciones-formato-ventana de plantilla.

Y así se verá, más o menos:

Entradas Relacionadas:

18 comentarios:


Gabriela

Querida Rosa:

puse un link en mi blog para que puedan agregar mi pagina a "favoritos", lamentablemente no me funciona por Fifefox sólo por IE,
Es así??? o hay forma de solucionarlo.

Adios.

Rosa

Hay uno para IE y otro para fierefox, por separado, para hacer uno solo para los dos hay un javascript, pero no se porque en Blogger nuevo no va...

El Ultimo Polvo

si podrias renovar este tema me seria de mucha utilidad, xq las comillas de mi plantilla, bue, ni siquiera tiene comillas ni eso je, un abrazo rosa

Rosa

El ultimo polvo, tomo nota, en cuanto tenga un ratillo, me pongo con ello...

El Ultimo Polvo

dale, muchas gracias rosa, muy feo es el blockquote de mi plantilla y me gustaria empezar a usarlo, muchas gracias de nuevo, salu

El Ultimo Polvo

gracias rosa x el saludo je, voy mejor se, ahora este finde me sakan el yeso de la mano mepa, te decia, sabes q tengo un problema con esto, fijate q hago como dices, y el texto dentro del blokquote me queda sobre las comillas, q puede ser?? te paso lo q puse en el blog

blockquote {
text-indent: 25px;
background: url(http://i239.photobucket.com/albums/ff240/diegomar454/comillas.gif);
background-position: 0 2px;
background-repeat: no-repeat;
}

tal vez lo puse en mal lugar dentro de la plantilla, puede ser?? un abrazo y gracias de nuevo x todo

Rosa

El Ultimo Polvo, lo siento, no había tenido en cuenta el tamaño de las comillas del ejemplo.
Añade esto: padding-left: 45px;

María Rodríguez

Hola Rosa, estoy intentando poner las comillas en mi blog pero no soy capaz. ¿Dónde se supone que tengo que insertar el texto:

blockquote {
text-indent: 25px;
background: url(URL DE IMAGEN DE COMILLAS DE APERTURA);
background-position: 0 2px;
background-repeat: no-repeat;
}
blockquote p {
display: inline;
margin: 0;
padding-right: 24px;
background: url(URL DE IMAGEN DE COMILLAS DE CIERRE);
background-position: bottom right;
background-repeat: no-repeat;
}

Gracias y un saludo.

Rosa

María Rodríguez , colocalo justo antes de ]]></b:skin>

El X'isiano
Este comentario ha sido eliminado por el autor.
El X'isiano

Buenas Rosa, en mi blog el blockquote que tengo es así:

blockquote{
padding: 10px 20px;
margin: 10px 0;
font-style:italic;
background-color:#222;
}

Es decir, lo que escribo aparece en itálica y sobre un recuadro (fondo) de un determinado color.
Lo que quería preguntarte es si sabes como poner las comillas sin perder el recuadro, ya que si copio el código que has puesto, aparece la de las comillas pero pierdo el recuadro (el color de fondo).

Gracias y felicidades por tu blog que ayuda a que los demás sean decentes ;)

Rosa

El X'isiano , prueba colocando el color que tienes de fondo antes de la imagen de las comillas:

background: #222 url(URL DE IMAGEN DE COMILLAS DE CIERRE);

Bocha

Rosa, coloque las comillas, pero tengo un problema. Yo coloque las de apertura y cierre, pero las de cierre me quedan alejadas del texto, y yo quiero acortar esa distancia.

Fijate en esta entrada: http://abran-cancha.blogspot.com/2009/12/feliz-navidad.html

Rosa

Bocha Reduce el padding-right: 24px;

Omar

http://i41.tinypic.com/vculv5.png

http://i41.tinypic.com/vculv5.png

les dejo unas comillas :P

Rosa

Omar Gracias! Muy alegre el color además ;)

Cocofansclub

Hola Rosa coloque las de apertura y cierre, pero la que cierra se ve por la mitad como hago para subirla??
saludos!

Rosa

Cocofansclub Como indico en la entrada, depende del tamaño de las comillas, pues el código que proporciono está pensado para una comillas concretas que son las que yo usé en las pruebas... tendrás que jugar con los padding o margin...

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