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:
18 comentarios:
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.
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...
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
El ultimo polvo, tomo nota, en cuanto tenga un ratillo, me pongo con ello...
dale, muchas gracias rosa, muy feo es el blockquote de mi plantilla y me gustaria empezar a usarlo, muchas gracias de nuevo, salu
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
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;
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.
María Rodríguez , colocalo justo antes de ]]></b:skin>
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 ;)
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);
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
Bocha Reduce el padding-right: 24px;
http://i41.tinypic.com/vculv5.png
http://i41.tinypic.com/vculv5.png
les dejo unas comillas :P
Omar Gracias! Muy alegre el color además ;)
Hola Rosa coloque las de apertura y cierre, pero la que cierra se ve por la mitad como hago para subirla??
saludos!
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
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.
Comentar con el formulario antiguo