Usando CSS podemos dar un toque más profesional a nuestro sitio creando pullquotes. Un pullquote es un elemento, normalmente de texto, que se destaca dentro de una entrada. El efecto es similar a los cuadraditos en prensa escrita, que destacan parte de un artículo. Por ejemplo una frase importante a modo de titular, extraída de una entrevista. Me resulta difícil dar una definición más concreta, así que a la derecha queda una imagen de muestra.
Para conseguir este efecto en nuestro blog, en primer lugar hay que definir una clase y colocarla con los atributos necesarios en nuestra plantilla, antes de ]]></b:skin>. Más adelante se ofrece un ejemplo.
Una vez creada la clase y ya redactando la entrada dónde queremos mostrar uno de estos cuadritos, sólo tendremos escribir el texto en el lugar donde queremos que aparezca, pero encerrado dentro de un SPAN con la clase del pullquote. Traducción de todo este rollo:
Un pullquote es un elemento que se destaca dentro de una entrada...La clase llevará los atributos que sean necesarios para conseguir el efecto que os guste a vosotros. Imprescindibles son el FLOAT y el WIDTH. Conveniente el PADDING y el MARGIN. Todo lo demás es opcional. A continuación os mostramos un ejemplo con muchos más atributos para que podais quitar o modificar, que siempre es más fácil que añadir... sobre todo si no se sabe qué es lo que se puede añadir.
El efecto es similar a los cuadraditos en prensa escrita...La subclase first-letter sirve para hacer la primera letra más grande que el resto del texto, pero como se ha comentado, esto es prescindible.
Si por el contrario, lo que queremos es complicarnos un poco -aparte del estilo definido en la clase- al redactar el post podemos ir añadiendo a ciertas palabras del texto del pullquote, efectos como cursiva, negrita, tamaño, color...
En SmileyCats, teneis unos cuantos ejemplos de pullquotes para que le echeis imaginación. Y ya puestos, de la misma manera pero más sencillo, podeis hacer otra clase para vuestras citas (blockquote).
Actualización 30-11-2008: Antonio nos hace saber que lo que aquí hemos llamado "cuadraditos de prensa escrita", son conocidos en el argot como sumarios. Gracias.
Para conseguir este efecto en nuestro blog, en primer lugar hay que definir una clase y colocarla con los atributos necesarios en nuestra plantilla, antes de ]]></b:skin>. Más adelante se ofrece un ejemplo.
Una vez creada la clase y ya redactando la entrada dónde queremos mostrar uno de estos cuadritos, sólo tendremos escribir el texto en el lugar donde queremos que aparezca, pero encerrado dentro de un SPAN con la clase del pullquote. Traducción de todo este rollo:
<span class="pullquote">Un pullquote es un elemento, normalmente de texto, que se destaca dentro de una entrada...</span>
Un pullquote es un elemento que se destaca dentro de una entrada...La clase llevará los atributos que sean necesarios para conseguir el efecto que os guste a vosotros. Imprescindibles son el FLOAT y el WIDTH. Conveniente el PADDING y el MARGIN. Todo lo demás es opcional. A continuación os mostramos un ejemplo con muchos más atributos para que podais quitar o modificar, que siempre es más fácil que añadir... sobre todo si no se sabe qué es lo que se puede añadir.
.pullquote {
width: 150px;
float: right;
padding:20px 10px 10px 30px;
margin:10px auto auto 10px;
background-color:transparent;
background-image: url(http://img47.imageshack.us/img47/457/comillasil6.gif);
background-repeat: no-repeat;
background-position: 2px 15px;
color:#990000;
border:0px solid #cccccc;
text-align:left;
font-weight:normal;
font-size:24px;
font-style:none;
font-family:impact;
line-height:24px;
}
.pullquote:first-letter {
color:#300C06;
display:block;
font-size:50px;
font-family:arial;
font-weight:bold;
}
width: 150px;
float: right;
padding:20px 10px 10px 30px;
margin:10px auto auto 10px;
background-color:transparent;
background-image: url(http://img47.imageshack.us/img47/457/comillasil6.gif);
background-repeat: no-repeat;
background-position: 2px 15px;
color:#990000;
border:0px solid #cccccc;
text-align:left;
font-weight:normal;
font-size:24px;
font-style:none;
font-family:impact;
line-height:24px;
}
.pullquote:first-letter {
color:#300C06;
display:block;
font-size:50px;
font-family:arial;
font-weight:bold;
}
El efecto es similar a los cuadraditos en prensa escrita...La subclase first-letter sirve para hacer la primera letra más grande que el resto del texto, pero como se ha comentado, esto es prescindible.
Si por el contrario, lo que queremos es complicarnos un poco -aparte del estilo definido en la clase- al redactar el post podemos ir añadiendo a ciertas palabras del texto del pullquote, efectos como cursiva, negrita, tamaño, color...
En SmileyCats, teneis unos cuantos ejemplos de pullquotes para que le echeis imaginación. Y ya puestos, de la misma manera pero más sencillo, podeis hacer otra clase para vuestras citas (blockquote).
Actualización 30-11-2008: Antonio nos hace saber que lo que aquí hemos llamado "cuadraditos de prensa escrita", son conocidos en el argot como sumarios. Gracias.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Hola,
ResponderEliminarcreo que para la estética de mis plantillas me vendría genial uno de los ejemplos de la página que citás para ejemplos llamado "Blizzard Store"... sólo que tiene el enlace al HTML roto. :(
El que mi plantilla trae por defecto no funciona.
A ver si con tus códigos logro algo parecido.
(Y si no puedo me darías una mano?)
Gracias
Seguro que sí y seguro que sí a tus dos últimas frases.
ResponderEliminarBueno lo he puesto en pruebas, ya lo abro. (Avisame si pasás porque ya blogger ha decidido que mi blog de pruebas original es spam y tengo vedado el acceso).
ResponderEliminar(No sé cómo ponerle los bordes sólo arriba y abajo y no en los costados.
Gracias!
Mar para eso, en lugar de...
ResponderEliminarborder:0px solid #cccccc;
...tienes que usar...
border-top ARRIBA
border-bottom ABAJO
A continuación del atributo, el ancho de la línea, el tipo y el color.
ya pruebo!
ResponderEliminarmuchas gracias!
No me sale :(
ResponderEliminarquiero ponerle 1px solid color silver
(para probar, creo que el del ejemplo es más claro), pero lo debo anotar mal en la plantilla, porque- o me convierte el texto en silver, o no se ven los bordes -
Qué dura que soy XD!
ya estaaaaaaaaaaaaaaaá!
ResponderEliminarmuchas gracias!
(queda muy bien)
Hola Oloman. Enhorabuena por tu blog. Soy un adicto a él. Mi nombre es Antonio y soy periodista, por lo que te voy a decir cómo se llaman esos cuadraditos que destacan en las noticias (jeje). Se llaman SUMARIOS. Saludos.
ResponderEliminarwww.mesoncico.blogspot.com
Muchas gracias Antonio. Siempre se aprende algo, medio-paisano...
ResponderEliminarhola
ResponderEliminaroye puedo aser k alguien k no tenga cuenta en blogspot me comente ??
Claro Yafar, pero tún no tienes que hacer nada. La persona que comenta tiene dos opciones si no tiene OpenId, cuenta Google ni nada por el estilo.
ResponderEliminarLa primera es comentar como "Anónimo", por lo que no se le pedirán datos adicionales. La segunda y más recomendable para que esa persona sea reconocida por los que lean los comentarios, es escoger la opción "Nombre/URL". En ese caso, pone como nombre el que quiera y en URL su página web. Si no tiene, se puede dejar en blanco o poner cualquier dirección.
Oloman, como estas... No se donde hacer la pregunta, pero la hago aca... Hice un blog nuevo, con una plantilla que baje de internet, pero no aparece el link para el formulario de comentarios, ni siquiera cuando pongo un cuadro en la entrada misma... que puedo hacer... ai es necesario puedo enviarte la plantilla via mail... te agradeceria... el blog es http://colkinevregion.blogspot.com/
ResponderEliminarHola Alexis. Lo primero de todo, comprueba que en la configuración de tu blog tienes seleccionada la opción de "Mostrar comentarios". También lo puedes ver al crear un post en "Más opciones"
ResponderEliminarparece que es un problema de la plantilla que elegi, porque todo lo que dices esta activado... gracias de todas maneras
ResponderEliminarHola, Oloman, está muy bueno, lo había visto en otros blogs, pero no sabía cómo se hacía. Lo estoy probando en mi blog de pruebas, y veo que se puede además darle estilo en el post agregando "style": float, background, etc. ¡genial!
ResponderEliminarSaludos.
Oloman, tanto tiempo sin pasar por tu blog... Feliz año nuevo!!!!! Ah, al finalmi duda anterior ya la solucione, y estaba en la zona de diseño del blog, tenia un nombre diferente y nunca me di el tiempo de verificar todo lo que habia, pero lo encontre y lo arregle. Te invito a que veas el blog, me pidieron que lo arreglara, es del colegio de kinesiologos regional del chile, la direccion es http://colkinevregion.blogspot.com y me dices que te parece...
ResponderEliminarHola Oloman
ResponderEliminarHe insertado el código que indicas en la plantilla, pero en la vista previa no se muestra el texto formateado según los atributos de la clase. ¿Esto es normal? ¿Hay alguna manera de arreglarlo para que se vea antes de publicar?
Todavía no he probado a publicar para ver el resultado porque quería hacer pruebas para modificar el estilo y sin la vista previa es un poco coñazo. No sé si estaré haciendo algo mal...
Saludos y gracias por tus consejos
Si, Farándula. Es normal. La utilidad de la Vista Previa no interpreta las etiquetas de las Clases.
ResponderEliminarSi no tienes otro blog para hacer pruebas, haz un post con fecha antigua y así tus pruebas no serán visibles por tus lectores ¡salvo porque accedan por casualidad a ese post!.
Gracias por la aclaración, ya he conseguido dejarlo a mi gusto y lo acabo de estrenar :)
ResponderEliminarBuen día, me gustaría saber como crear otra clase de pullquote distinta de la que ya he instalado. Es decir, poder disponer de dos tipos diferentes de pullquotes sin que se estorben entre sí.
ResponderEliminarSaludos.
Ok, ya lo he resuelto tras un par de ajustes.
ResponderEliminarMil Gracias. Saludos.
Comic Sans, en serio???
ResponderEliminarLo más extraño es que funciona, felicidades.
Buenas.
ResponderEliminarInstalé pullquotes en mi blog, aparentemente sin problemas. El único inconveniente es que en las suscripciones por correo electrónico, no aparece el pullquote y, en su lugar, aparece ese texto del sumario entre el texto del párrafo donde se insertó, lo que convierte algún párrafo en un texto sin sentido.
Mi pregunta es cómo hacer que aparezca el pullquote como tal en las suscripciones, o bien, como conseguir que el texto de los pullquote desaparezca en esas suscripciones?
Gracias.
El feed tiene sus limitaciones y sólo tienes que seguir el mío para comprobar que la mitad de cosas que pongo en las entradas, no salen en los lectores o salen defectuosas. La razón es que los RSS sólo leen e interpretan el contenido del post y no utilizan la parte de estilo que tengas en la plantilla. Es posible que si el código CSS del pullquote lo pones en una entrada, te salga al leer el feed, pero sería una lata hacerlo para cada vez que lo necesites. Lo cómodo es tenerlo en la plantilla.
EliminarPor cierto... divertido avatar :)
De nuevo, gracias por ayudar a los "novatos". Seguiré aprendiendo en tu blog.
Eliminar¿Cómo le puedo poner una línea vertical a la izquierda del pullquote? Ya llegué hasta la septima página de Google, creo que eso quiere decir que nadie lo ha dicho nunca :(
ResponderEliminarGracias por la información.
Yo creo que es tan fácil que por eso nadie lo ha escrito nunca:
Eliminarborder-left: 10px solid black;