martes, 10 de julio de 2007

Imagenes en el titulo del post

He aqui la forma de poner una imagen de fondo para los titulos de los posts.

Ya que en cada plantilla varia el codigo Post y Header, solo les enseñare este hack si tienen lo siguiente:

Vallan a Plantilla----> Edicion HTML, y buscan esto:

.post h3 {
margin: 10px 0;
padding: 0;
color: #FF9933;
font-size: 18px;
font-weight: bold;
}

NO tiene que estar exactamente igual, solo tiene que decir "post h3", si tienen este codigo pueden proseguir.

No olviden guardan antes una copia de respaldo de su plantilla.

Ahora bien tenemos que el parametro del titulo del post de nuestro blog es "post h3", entonces todas las modificaciones se haran a partir de ahi.

Nos situamos en la siguiente parte del codigo y agregamos el codigo que esta en azul:

.post h3 {
margin: 10px 0;
padding: 0;
color: #FF9933;
font-size: 18px;
font-weight: bold;
}
background: $sidebarBgColor;
background-image: url (Aqui la url de su imagen);
background-position: top center;
background-repeat: no-repeat;

Si quieres que el fondo del titulo del post sea del mismo color que el de tu sidebar solo deja el codigo que esta en rojo.

La parte que dice "background-position: top center;" permite colocar la imagen a la izquierda, derecha o centrada. Así, si queremos colocarun pequeño icono a la derecha del titulo sólo hay que poner la dirección de la imagen y cambiar top center por right.

El parámetro que dice "background-repeat: no-repeat;" sirve para que la imagen no se repita más de una vez. Si no le ponemos nada o ponemos "repeat" ésta se repitirá hasta llenar el hueco destinado al título.

Espero haber sido lo mas claro, si tienen dudas no duden en poner sus comentarios.


Escucha este escrito

4 Personas dejaron sus comentarios:

ruypster comento sobre este post...

Buenos días

Tengo otro pequeño reto para vosotros que entendéis de "téznica".

He visto que algunos blogs de blogger (muy pocos, la verdad) disponen de un favicon personalizado. He leído mucha documentación al respecto en la web, pero, o bien hacen referencia a la versión Beta de Blogger que ante sí permitía cambiar el icono, o bien simplemente no funciona. Así que, ni corto ni perezoso, he copiado la línea de código de una web que dispone de dicho icono y, tras cambiar la url donde he alojado mi propio .ico la he pegado justo por debajo del ||head||, así:

||link href='http://h1.ripway.com/ruypster/favicon.ico' rel='shortcut icon'/||
||link href='http://h1.ripway.com/ruypster/favicon.ico' rel='icon'/||

Nota: he sustituido en este mensaje los símbolos <> por || al no ser posible su publicación con estas líneas de código.

Peeeero, lamentablemente sólo funciona en Firefox (no he probado otro navegadores), pero desde luego en IE no va. He borrado el vínculo de mi blog en mis favoritos, he borrado el cache de mi navegador, en vano.

Ahí os dejo ese reto: ¿cómo poner un favicon en Blogger?

Y aquí os dejo la url de un blog (de Blogger) con favicon: http://beautifulbeta.blogspot.com/

Gracias!

ruypster - Blog
Là où je passe, je laisse ma trace.

Hacktime comento sobre este post...

Acabo de publicar una entrada acerca de los favicons. :)

Prismatico comento sobre este post...

Como puedo hacer que el titulo de mi post tenga el link hacia el mismo, o sea en la pagina principal todos los post que aparecen no se puede darle clic al titulo del post para hacerle trackback o solo ver el post.
espero su ayuda

Gabriela comento sobre este post...

hola, como puedo colocar una foto al lado de la firma del autor del post? Teniendo en cuenta que es un blog multiautor, quisiera que salieran automaticas las fotos chiquitas al lado o debajo de la firma de cada autor. ¿Se puede hacer eso en blogger?

Gracias

Calendario de posts

Cargando...

 
ir arriba