51

Titulo de entradas con imagen flotante

Me consulta Walter sobre la forma de modificar los títulos de sus entradas tal como ha visto en otro blog.
Me ha parecido una forma muy original de mostrarlos, así que voy a explicar la manera de conseguir algo similar a lo que Walter me apuntaba:



[1] En primer lugar aplicaremos una imagen de fondo a nuestros titulos.
Nos situamos en la pestaña "Edición" de nuestro panel de Blogger y pinchamos en "Edición Html".
A continuación marcamos "Expandir la plantillas de artilugios" y localizamos este código:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Tendréis en cuenta que cuando pongo los códigos de ejemplo, estoy refiriendome siempre a las plantillas originales de Blogger, ya que en otras plantillas podría ser distinto (PostHead, post-title, etc.)

[2] Aplicamos la imagen de fondo al título, un borde que resalte dicha imagen y le damos una separación al título del borde de la imagen en su parte izquierda (para evitar que la imagen flote sobre el texto), de tal manera que el código anterior pasaría a quedar así:

.post h3 {background: url(URL_DE_LA_IMAGEN_DE_FONDO) repeat-x bottom;
border: 2px solid #224797;
margin:.25em 0 0;
padding:0 0 4px 50px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}


En padding: 0 0 4px 50px; y más concretamente en donde dice 50px, es donde aplicamos el valor que marcará la separación del título, lo más adecuado sería ponerle el mismo valor que el ancho de la imagen.

En font-size:140%; controlamos el tamaños de la fuente del título.

En border: 2px solid #224797; modificamos el ancho (2px), el tipo (solid) y el color (#224797) del borde.

Por supuesto que en "URL_DE_LA_IMAGEN_DE_FONDO" hemos de colocar la url de la imagen.

[3] Guardamos los cambios.

[4] Ahora colocaremos sobre la imagen de fondo de nuestro título, la imagen flotante como en el ejemplo (la chica).
Lo más adecuado en este caso es usar una imagen con fondo transparente, aunque una imagen "normal" tampoco quedará mal siempre que su tamaño sea el adecuado, en el ejemplo la imagen que le he tomado prestada a Walter mide 50 x 50 pixeles.

Esto vamos a hacerlo directamente en el html de la plantilla, así que nos situamos en "Edición HTML" y expandimos las plantillas de artilugios para localizar esta línea:

<b:includable id='post' var='post'>

Justo debajo de esa línea añadimos el código necesario para mostrar la imagen:

<img alt='Tema ' border='0' src='URL_DE_LA_IMAGEN' style=' margin: 0px 4px 0px 10px; float: left; '/>

Ahí mismo podremos modificar el margin para situar nuestra imagen en el lugar exacto que queramos respecto al título.

Nota:
Tened en cuenta que el resultado dependerá de algunos factores como el ancho de las entradas, el tamaño del título, etc... con esto solo intento orientaros para que os hagáis una idea de lo que podríais lograr con un poco de paciencia.

Entradas Relacionadas:

51 comentarios:


Brownie

Me parece genial Rosa, me gustaría hacerlo...

estuve buscando en tu blog estas 2 preguntas, pero no las encontré:

1.Como hacer lo mismo pero que en vez de eso, muestre la imagen del autor, ya que en el blog somos 2 autores nos serviría mucho. Antes usaba Sezwho(.com), pero me sale una imagen muy pequeña y el editor de SW (SezWho)no lo modifica :(

2.Como cambio cuando voy a un post especifico, el #comment-form por #comments como tú lo tienes?

Anónimo

hola ROSA

solo quiero hacer una preguntita

todos los trucos que se pueden modificar las plantillas de blogger deben ser clasicas ?

o las modernas que no proviene de blogger
y que son de otros autores

quiero que vos me saques de esa duda
para que no me de errores al poner el codigo HTML


si por favor


Gracias

Ligia Melo Martínez

Rosa:

La pregunta número uno de Brownie es muy interesante...cuando la contestes le pasaré el dato a unos amigos que tienen un blog compartido.

Un abrazo fuerte,

Anónimo

Hola Rosa, me gustaría saber cómo puedo poner en los comentarios negrita, cursiva, etc. Gracias.

enrique

Buenísimo esto, Rosa.
Te hago una pregunta sobre otro tema: hay alguna manera en blogger de aceptar un invitado o un autor de un blog por un período de prueba de 30 días o algo así?... Tengo la idea que si.
Mi blog es privado, y me gustaría saber si esa opción es posible.

Anónimo

Esta buenisimo el truco Rosa, pero yo quisiera colocarle un calendario con fecha en lugar de una imagen a los titulos del blog ya lo eh intentado antes y no me salio no se si se pueda, haber que opinas chau.

Anónimo

Increible el truco, pero se podría con diferentes imagenes, por ejemplo si tienes categorias en el blog, como yo que tengo, partituras, biografias etc.

Anónimo

Dime esto sirve también para wordpress o sólo en blogspot?

Anónimo

Hola Rosy:
Esta excelente el truco…solo un pregunta me aparecen varias imágenes (se repiten) en el código dice: h3 {background: url() repeat-x la palabra “repeat-x” significa repetir, si la quito ya no aparece la imagen, si pongo “not repeat” tampoco aparece. Me gustaría saber como le haga para que solo aparezca una sola imagen.
Gracias Rosy por la gran ayuda a los que estamos en esto de los blogs.

Saludos desde Purépero, Michoacán. México

Anónimo

gamaxl , pues yo ahora mismo no sabría conseguir eso, lo siento, aunque recuerdo que en Vagabundia se publicó algo hace tiempo sobre como sustituir cada etiqueta por una imagen de forma automática...fisga un poco por allí ;-)

Anónimo

Brownie , a la pregunta 1, te diré que llevo tiempo intentando eso y aunque me he aproximado bastante, el resultado no es optimo del todo...seguiré tras ello.

La pregunta 2, siento decirte que no la he entendido, o sea, no se exactamente que quieres decir...

Anónimo

ChUkIsLuKiS , cuando explico algún "truco" siempre tomo como referencia el código de las plantillas originales de Blogger, lo cual no quiere decir que no funcione en las adaptadas, pero si a menudo, en estas plantillas elcódigo difiere un poco de las originales, se trata de buscar el sitio adecuado en ellas o el código que sustituye al original.

Anónimo

Rafael Enrique, en el código pone eso para que la imagen del título se repita en horizontal (la del fondo de texto, no la chica).
Para que no se repita has de colocar no-repeat en lugar de repeat-x

Anónimo

Ligia Melo Martínez , pues ya ves :-( aún no lo he conseguido.

Anónimo

Peque ¿que comentarios? ¿los que tu dejas en los blogs o los que te dejan a ti? no entiendo muy bien...

Anónimo

Enrique, puedes invitar a cualquier persona que decidas a publicar en tu blog, el tiempo no puede limitarse, es decir, estará mientras tu no decidas retirarle el permiso.

Anónimo

STBAN, mira esto:
http://elescaparatederosa.blogspot.com/2008/06/fecha-dentro-de-una-imagen-tipo.html
sino te convence ve a Vagabundia, que hay otro sistema algo distinto pero efectivo.

Anónimo

Ideas de Negocios , nunca he usado Wordpress, así que no tengo ni idea ...

Anónimo

Gracias Rosy..
Me ayudo tu consejo..y logre poner una sola bandera de imagen en mi blog..del trucoTitulo de entradas con imagen flotante, me aparecían varias. Pasando a lo siguiente en días anteriores te mande el primer mensaje por un problema que tenía en el blog… pero buscando de aquí y allá y sobre todo en un momento de tranquilidad mental logre solucionar el problema…(tu muy amable me habías ofrecido tu ayuda, pero el problema que no llego mi correo, me solicitaste que te lo mandara de nuevo)pero lamentablemente perdí todo el avance que tenia…de tus excelentes trucos.. Sólo me queda empezar de nuevo…y hacerte la invitación para que los visites el blog…es de la escuela donde trabajo… soy el responsable del aula de medios..Espero que te guste.
Nuevamente Gracias..

Saludos desde Purépero, Michoacán. México
http://pureperoblog.blogspot.com/

Anónimo

ok gracias Rosa.

enrique

Sun embargo me consta que esa opción que te preguntaba es posible en Blogger. Voy a seguir averiguando, y después paso el dato.

Anónimo

enrique, pues no se, la verdad, yo en el panel no veo más opción que la que te comento en "Configuración - Permisos", no obstante, te agradecería la información si estás en lo cierto.

Anónimo

xvdrey54

alejandra

hola rosas tienes un blog de ayuda q me a servido mucho visita mi blog q tienes un premio en: http://dechicaslindas.blogspot.com/2008/08/premio-blog-perfecto.html recogelo

Cinthya Castillo

Holas Rosa!!!
Asi como jugando entre a TU BLOG!, y de veras que me he tomado todo el dia para leerme cada uno de tus post, los que me gustaban los aplicaba en mi blog y los que no, pues solo les daba una ojeada...
Pero muchisisisisimas gracias por este espacio de veras me ha servido de mucho...
Ya tienes una nueva visitante...

Besos!
Y gracias nuevamente!

Anónimo

T|nT|a Encantada de tenerte "revolviendo" por aquí :-L

Anónimo

¡Buenísimo! Muchas gracias por la información. Ya lo implementé, pero como tengo el calendario de fechas desfazado dejé la lapicera arriba como relleno :) saludos

NO A LA DISCRIMINACION

Maravilloso aporte para todos los blogueros.
Mil gracias

MARGA'S HAPPY CRAFTS

Hola Rosa, Lo he intentado y en principio, creo que lo he hecho bien, pero el problema es que cuando edito una nueva entrada, no tengo ningún lugar para poner el titulo de la entrada.
¿Como puedo solucionarlo?

Gracias.

Anónimo

MARGA...¿Cómo que no tienes sitio para colocar el título? que no sale el "hueco" en tu editor en el panel de Blogger quieres decir :-X

Rubí

Hola Rosa :-) me encanta tu página me la encontré viendo el blog de una amiga y me ha servido mucho, he ido adornando mi blog gracias al Escaparate.

Feliz Navidad para ti y todos los tuyos, hasta pronto, bye.

Anónimo

Rubí, ¡Gracias cielo!

PITU

Rosa he puesto la imagen de fondo y se hace de grande segun de largo sea el titulo yo no lo veo mal pero el que no sabe es como el que no ve ¿es asi? un abrazo

Anónimo

PITU, si, cuando has aplicado las entradas expandibles en la página principal, así es como queda al aplicar un fondo a los títulos.

Anónimo

muchas gracias, eres mi maestra

PX

Tambien se ve muy bien colocando la imagen en el footer y anadir el texto "posteado por" un saludo

Un Perro

Otra vez yo Rosa :-|
existe la posibilidad que el menú "Css #menu4" bloquee las funciones de este "truco" ?
en el blog de pruebas esto funciona bien, pero anula la función de este menú, dejando al descubierto las etiquetas sin el aspecto que le da el CSS del menú, en cambio en el original, la función de este truco no se puede visualizar, mientras que el menú permanece activo.
:o

Anónimo

Un perro Casi con seguridad te digo que no, cada uno lleva su propio CSS.
Si podría ser que no hayas colocado alguna llave de las de cierre {

Un Perro

Hola Rosa !!
bueno con este "truco" no hay problema alguno, pero aprovechando que se toca el tema titulo de entrada, me gustaría saber si es posible alinear el titulo de las entradas, y si es que existe un requisito máximo de caracteres por linea en el blog, ya que al tener un titulo lo suficientemente largo como para que haga "un salto de linea" la imagen de fondo se posiciona en el salto de linea.
Debo adecuar los títulos de entradas a una medida especifica? (creo que eran 50 caracteres) o hay manera de "acomodar" el titulo en toda la linea?
ufs..como ves siempre me gusta complicarme un poco jaja

Un beso Rosa

Anónimo

Un perro No hay manera de acomodar el título en una solo línea.
Si el ancho del main es menor que lo que el título ocupa, este "saltará" a la línea siguiente, ya que aunque tenga pocos caracteres si el tamaño del texto es grande puede superar el ancho disponible.

Eva Flores

Hola Rosa! Este post es genial, como todos.
Me gustaría hacerte una pregunta muy tonta, como aumento la separación entre el título del post y el texto? es que no consigo dar con ello.
Gracias, eres de gran ayuda.
Eva

Anónimo

*Eva* Localiza esto en la plantilla:
/* Posts
-----------------------------------------------
*/

Justo debajo, añades esto:
.post-header-line-1 {
padding-top: 20px;
}

Cambias 20 por el valor que quieras darle a la distancia... ve usando vista previa.

Eva Flores

gracias Rosa! eres la mejor!!!

Despreciable!!

Hola Rosa,,no sabia donde preguntarte esto asi q lo pondre aqui q algo tiene q ver con los titulos de las entradas.

Me gustaria poder cambiar el color del escrito de los titulos de mis entradas pero no tengo esa opcion en el menu de editar,,me podrias decir en q parte del codigo puedo cambiar el color?

De antemano gracias y felices fiestas.

Anónimo

Despreciable!! En esta parte del código de tu plantilla:

.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: #666666;
font-weight: bold;
}

Cambia el código del color actual #666666 por el que necesites.

Despreciable!!

Vale,,muchas gracias Rosa.

Despreciable!!

Rosa,,y hay forma de cambiar la tipografia solo de los titulos? trate de en esa parte del codigo agregar "font: Georgia" y no resulto ._.

Anónimo

Despreciable!! Trata de probar en esta parte del código:
.post h3 {

añadiendo algo así: font-family: Georgia;

Miguel

Hola de nuevo!!!
Unan preguntilla:

He conseguido poner una imagen delante del título de las entradas y ha quedado bien.

Me gustaría poner esa misma imagen delante de los titulos de los distintos widgets de la sidebar ¿Es eso posible?

Gracias por tooooooodo. Me sorprende cada día más la cantidad de cosas que sabes!!!!!!

Miguel

@Miguel

Hola jefa!!!!

Me respondo a mí mismo para decirte que ya lo he conseguido, nuevamente gracias a tí.

La respuesta estaba por el blog (como todo lo que he necesitado hasta ahora). Aunque me ha costado, pero al final lo he hecho y creo que ha quedado bien.

Tambien he conseguido poner la misma imágen en el título del formulario para enviar comentarios que aparece despues de cada entrada del blog.

así queda un poco más homogéneo y tal...

Bueno, pues gracias de nuevo!!!!

Anónimo

Miguel Bien por ti! ;)

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.

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