33

Modificar el título de las entradas

Como suelo andar "destripando" plantillas, a diario experimento cosas nuevas. Hoy voy a explicaros como cambié el título de las entradas de otro de mis blogs, a mi me gusta como queda :-)

Dentro del CSS de nuestra plantilla es donde podemos cambiar los parámetros para "ordenar" al blog que se muestre de una forma u otra.
En esta parte del código HTML de la plantilla, por ejemplo, podemos hacer que el titulo de nuestras entradas se vea diferente: .post h3 {
Solo hemos de añadir o quitar algunas cosas...


Así estaba antes:

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


Asi se ve ahora:

.post h3 {
margin:.25em 0 0;
padding:5 5 5px;
font-size:140%;
text-align: center;
text-transform:uppercase;
font-weight:bold;
border: 1px solid;
line-height:1.4em;
color:$titlecolor;
}


Podéis ver que he corregido el "padding", es decir, la distancia que quiero darle desde el título a los bordes.
He añadido el valor "text-align", en este caso he puesto center, lo que hará que el título de la entrada se vea centrado.
He añadido el valor "text-transform", lo que hará que el texto del título se vea en mayúsculas.
He cambiado "font-weight:normal;", por "font-weight:bold;", lo que hará que el texto del título se vea en negrita.
He añadido el valor "border", lo que hará que el título aparezca dentro de un borde, además le doy al borde el valor "1px solid" para escoger su grosor.
El color del texto lo dejo según el estilo del blog, y si me interesa cambiarlo, lo hago en "fuentes y colores de la plantilla".


Y este ha sido el resultado:



Ahora os toca a vosotros hacer experimentos... ;-)

Entradas Relacionadas:

33 comentarios:


Cristian

Me gusta como queda así...muy lindo.

enrique

Estimada Rosa, me puedes decir cómo cambio de lugar la sidebar de mi blog? Por ejemplo, quiero pasarla de derecha a izquierda. Sé que es posible, te agradezco cualquier consejo, muchas gracias.

Rosa

Enrique, necesitaría saber que plantilla usas y si es en blogger clásico o no...de todos modos por si te sirve de ayuda, en las propiedades de tu sidebar en el CSS de la plantilla, vendrá el valor
float: right; o float: left, si es right has de poner left o viceversa.
Para una explicación completa necesitaría saber que plantilla usas.
¡Saludos!

Angel

hola rosa

¿me podrías decir como cambiar el color del titulo del post mediante el codigo Html? en vez de utilizar FUENTES Y COLORES del diseño de Blogger. Es que me da problemas.

Me encanta tu blog y he puesto el enlace del tuyo en mi blog

http://albacete-fotos.blogspot.com/


mi correo es

mojul8@yahoo.es


gracias por todo

Rosa

Angel, pues aquí mismo en .post h3 {

Fíjate en la línea color:$titlecolor;
cambias el $titlecolor por el código del color que quieres así:

color:#ddd;
en este ejemplo he puesto el gris

Helena

Hola Rosa!! Tenia muchas ganas de modificar el titulo de las entradas! Haces que nos salga nuestra vena creativa, y le he añadido un "background", donde le puesto la url de la imagen de una textura que esta incluida en la plantilla del blog, y se me ha quedado a juego :-P... a mi me gusta mucho como ha quedado!!

Lo unico es que me queda el texto de la entrada algo pegado al titulo del post, no es que quede mal, pero me gustaria separarlo un poco. Hay alguna manera?

Muchas Gracias por ayudarnos a personalizar el blog, apañá!

Rosa

Helena A mi también me gusta, muy chulo ;)

Añade en Edición HTML en el código de tu plantilla antes de ]]></b:skin> esta línea:

.post-header-line-1 {padding-bottom:15px;}

Así es como yo lo tengo, si necesitas más separación aumenta el valor en 15

Helena

Gracias Rosa, ahora está mejor. Eres un primor!

Helena

Hola Rosa!!

Para modificar el borde: si en lugar de color, lo que quiero poner es una imagen...se puede? Explicado así a lo mejor suena raro, pero es que tengo una imagen de rayas, y me gustaria que el borde del titulo de las entradas se viera a rayitas, de un grosor de 2px o asi. Lo he intentado poniendo background-border con la url de la imagen y mil cosas mas, pero no suena la flauta :O
Creo que me he explicado fatal... :-|

Gracias Rosa!

Rosa

Helena Te has explicado perfectamente :D

Para hacer eso, tendría que ser una imagen de un borde de rayas pero el centro transparente...no si me explico yo ahora. :S

Helena

vale, sería insertar una imagen de fondo que hiciese el efecto de borde al tener el centro transparente, no?
Pues lo he intentado, pero lo que no se es que tamaño debe tener la imagen (imagino que tengo que mirar como referencia el ancho de las entradas en la plantilla...y donde lo miro??) y se me repite la imagen en el fondo, y me imagino que tendre que poner un "no-repeat", pero no se muy bien como...Vaya pelicula me estoy montando...a ver si puedes iluminarme, ;-)

Muchas gracias, Rosa!!!

Rosa

Helena El ancho de tus entradas lo ves em .main-wrapper{
Tu imagen tendría que tener 500px

Se colocaría en el mismo sitio que pusiste la otra, añadiendo el no-repeat:

background:url(url_de_la_imagen) no-repeat;

Helena

Gracias Rosa, a ver si me sale :P

Ernesto M.

Muy bueno!

Lou

¡¡¡¡¡¡Gracias!!!!!

:D

Viva La Danse

Hola Rosa!
Hoy estoy un poquito molesta, posteando en varios post! :)
Quisiera saber si se puede cambiar el estilo de fuente, porque intente ponerlo en diferentes lugares dentro del codigo, pero no cambia.
Lo que agregue es esto

font:Comic Sans MS;

Gracias! ;)

Rosa

Viva la Danse Si es una plantilla original de Blogger sin modificar, eso se hace de forma automática desde "Fuentes y colores"... sino tendrías que hacerlo a mano, pero depende de que fuente vayas a cambiar... sidebar, títulos, todo...

Jose, a secas

Hola Rosa.

La verdad es que no se donde dejarte este comentario. Espero que no te moleste que haya elegido esta entrada para ello.

Tengo un problema en el blog del que no había etnido constancia hasta que he puesto un título "demasiado" largo a un post.

Aquí te dejo una captura:

http://img39.imageshack.us/img39/6166/errortitulopost.jpg

Como verás el problema es que el título se "monta" con la fecha de publicación del post y no encuentro modo de solucionarlo. No me gustaría tener que disminuir el tamaño de la fuente del título. Imagino que la solución está en estrechar el ancho para que automáticamente provoque un salto de línea.

Te agradecería muchísimo que me echaras una mano.

Un afectuoso saludo ;)

Rosa

Jose, a secasPodrías como dices estrechar el ancho, dándole un width a los títulos (en X el valor que incluyas) y efectivamente provocarás el salto de línea, otra cosa sin disminuir la fuente y manteniendo la fecha en la misma línea no se me ocurre:

.p-head h2 {
width: Xpx;
color:#940F04;
font:bold 20px/20px Arial;
letter-spacing:-1px;
margin:0px 0px 2px 0px;
}

Jose, a secas

Pues creo que tendré que dejarlo como está o disminuir el tamaño de la fuente porque al aplicar el atributo width "desaparece" la fecha de publicación... a no ser que también tengas el remedio perfecto para evitarlo, jeje.

Jose, a secas

Ahivá... es que resulta que en la "Vista previa" no sale la fecha... xD

Muuuuuchas gracias Rosa ;)

Rosa

Jose, a secas Gracias a ti!... lo he visto y no queda mal :D

Ay, Caramba!

Hola Rosa! Muchas gracias!! Estaba muy pequeño mi titulo...pero me queda muy pegado a la foto de la entrada, sabes de alguna solucion para separalo un poco?? Muchas graciassssss!!!
Alejandra.

Ay, Caramba!

Ya está! Simplemente quite el borde que no combinaba mucho con mi blog, pero la tipografia si que esta como queria!
GRACIAS DE NUEVOOO!!!

Rosa

Ay, Caramba! ¡Gracias a ti! :D
¡Me encanta tu nick! ;)

Luis

Hola rosa quisiera preguntarte esque segui tus instrucciones de como modificar el titulo de entrada osea como personalizarlo pero me fui a .post h3 e ise mis modificaciones como imagen de fondo y eso y al querer verlo no cambio nada entonces estuve modificando pero no cambiaba nada hasta que se me ocurrio cambiar enves de .post h3 a .post h2 y WOOwww al momento de ver mis modificaciones se pudieron ver y entonces no se porque si viene por defecto .post h3 porque no funciona es algun bug o error de la plantilla?

Uso la plantilla minima de blogger

Una duda ¿como modificar los errores de esa plantilla ay algun tutorial porque he visto errores es normal? :(

Rosa

Luis En la Mínima de Blogger sin modificar es h3... lo que sucede es que si cambias de plantilla sobre la que tienes y luego vuelves a poner la misma de nuevo por ejemplo, algunos datos de las que has estado probando se quedan mezclados con la que tenias...así al final hay ahí un lío de códigos... lo mejor para evitar esto es cambiar de plantilla siempre eliminando el código de la anterior y copiando en su lugar el de la nueva...

Luis

oye rosa perdona mi ignorancia pero como cambio de plantilla asi como me dices para no mezclarlas porque he intentado cambiar mi plantilla por la minima y de todas formas no funciona el .post h3 tengo que cambiarlo a .post h2 e incluso he pegado la minima en un bloc de notas para eliminar la que tengo y pegarla directamente pero no puedo solo se pega una parte de todo el codigo :(

algun tutorial?

Rosa

Luis No hay tutorial para esto...deberías borrar por completo el código de tu plantilla desde edición HTML y pegar en su lugar el de una Mínima sin modificar, para así partir de cero...

Gogely The Great

Imposible centrarlo ... :X

Tempe

¡Hola Rosa! :)

Ya cambié las forma de los títulos de mis posts y todo está correcto, ¡muchas gracias! ;)

Ahora me pregunto si se puede hacer lo mismo con los títulos de los gadgets. No quiero hacer nada complicado, solo alinear el texto al centro. ¿Sería posible hacer algo así?

Un saludo,

Tempe.

http://metalerosargentinos.blogspot.com/

QUE GRANDE QUE SOS!! HACIA TIEMPO QUE ESTABA BUSCANDO ESTO, SOS UN GENIO!! ABRAZO!!

Rosa

Tempe Si claro que es posible, pero antes tendría que saber para que plantilla es... no en todas es igual.

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