Fecha a la derecha y título con color
Me pregunta Jorge en un comentario la forma de hacer que los títulos de las entradas se vean igual que las de mi Escaparate, es decir, con la fecha a la derecha y un color de fondo que se muestre al pasar el cursor sobre ellas.
Como ya me lo han preguntado varias veces, supongo que a más gente le interesará, así que paso a explicar como hacerlo.
[1] En la parte de "Diseño" - "Edición HTML" localizamos este código sin expandir artilugios:
h2.date-header{
Lo que más nos interesa es la línea que dice float:left; y que es la que hace que la fecha se muestre a la izquierda, tendremos que cambiarlo por float:right; para que se "mueva" a la derecha.
Ahí mismo tal vez tendremos que modificar o añadir algún parametro como "padding" si queremos separar la fecha un poco de la derecha para que no quede tan pegada al borde de la entrada
[2] En esa misma zona normalmente encontraremos .post h3 a:hover, es ahí donde añadiremos el color de fondo que se verá al situar el cursor sobre el título; si nuestra plantilla no lo tiene incluido, podemos hacerlo nosotros directamente:
.post h3 a:hover{
background: #ffffcc;
}
En el ejemplo he puesto el color que uso yo, vosotros lo cambiáis por el que quede mejor con vuestro diseño.
a las
Etiquetas:
Entradas,
Plantillas
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
78 comentarios:
MMMMM, Rosa no se si nadie te ha preguntado esto pero, porque el header de tu blog tiene el logo de Blogger Draft en la esquina? Otra vez perdon que no tenga que ver
Stifler , mi ratoncito curioso :D
Pues sencillamente quería hacer que se viese el logo de Blogger en la cabecera y puse ese porque el naranja no me gusta demasiado...nada mas. ;-)
Rosa:
Yo no se como puedes ser tan rápida para contestar todo lo que te pedimos. Si fueramos un solo un grupito lo entendería...pero somos muchísimos los que te seguimos día tras día pidiendote cosas muy diferentes.
Cada vez más me admira tu trabajo altruista...sin recibir nada a cambio.
Dios te bendiga.
Tu fan número 1.
Esta es otra de las cosas que habia querido hacer... ya lo hice y quedo muy bien!! Tampoco le puedo hacer muchas cosas a mi blog porque uso la plantilla rounders, y esa no es muy modificable...
Gracias Rosa!!
Rosa, esta entrada de hoy está buenísima!
Ya puse el código que nos indicaste para que, al pasar el cursor sobre los títulos de los posts, el color de fondo se muestre diferente. Mi fondo de pagina es amarillo, por eso le cambié el color (#ffffcc) por un color verde precioso (#99FF00).
Gracias, gracias, gracias.
Hola rosa, lo primero de todo, por supuesto, es darte la gracias por este chaleco salvavidas a medida de tanta gente...
Me gustaría preguntarte un monton de cosas, vamos se me ocurren una cada media hora más o menos, pero de momento lo que me hace más ilusión es tener una firma en mis post.
¿es eso posible?
espero que algún dia me lo cuentes.
De todas forma gracias por todo lo que nos has dado hasta ahora.
Buen consejo Rosa. Yo no lo he usado porque uso un plantilla nueva. Pero es un buen consejo.
Muchas Gracias de nuevo.
Ligia, muchísimas gracias por el ¡Dios te bendiga! es lo más bonito que me han dicho en mucho tiempo :-L
Pedrox, pues si, es una de las que complican algo su modificación, y además no la usa demasiada gente...de ahí que no se encuentren demasiados cambios explicado para ella en la red, pero modificable si que es,en realidad todas lo son,con más o menos trabajo...
Ika, claro que es posible, yo tengo publicado como hacerlo usando Live Signature
En una parte de esa entrada digo:
Una vez obtenida vuestra firma podéis pegarla en plantilla-opciones-formato en la cajita de abajo de entradas y así aparecerá en todos los post, si en alguno no queréis ponerla, la borráis y ¡listo!
Puedes hacer lo mismo con una imagen u otro tipo de firma.
Oscar, gracias :D
lo siento, se ve soy un "crac"...
¿donde está la cajita de abajo de entradas?
Cuando lo encuentre intentaré lo de plantilla-opciones-formato...
SOCORRRROOO
Me desespero conmigo misma
Ika, te contesto ahora mismo en una entrada.
mil gracias
mil gracias
yo tampoco encuentro la cajita, en opciones de entrada hay dos espacios ¿cajitas? una para la fecha y otra para la hora, ¿es por ahí o estoy perdida? Yo ya tengo la firma, pero sólo en un blog al final de la página y me gustaría probar como dice Ika a ver que tal queda.
Felicidades y gracias por la ayuda, ya que, aunque es la primera vez que intervengo, te sigo mucho y gran parte de lo que sé te lo debo.
Aseret, mira la última entrada que he publicado, si vas a la pagina de Inicio del blog es la primera ;-)
Hola, este mensaje no es para hacerle preguntas ni consulta alguna, solamente darle mi agradecimiento por cientos de veces que pude resolver mis dudas en sus posts y haber podido mejorar mi trabajo. Por eso, su paciencia y esa manera tan especial de compartir que tiene Ud., un gran abrazo señora desde México con toda mi gratitud.
Hola Rosa: antes que nada excelente el blog, lo utilizo mucho para complementar mi pag. Mi consulta era. Hay alguna posibilidad en BLOGGER de poner el nombre de la etiqueta antes del titulo? Como si fuera una seccion de un diario?
Siempre aparece por debajo del post y lo quiero cambiar.
Muchas gracias
agustin
www.hispanofc.net
Hola Rosa: antes que nada excelente el blog, lo utilizo mucho para complementar mi pag. Mi consulta era. Hay alguna posibilidad en BLOGGER de poner el nombre de la etiqueta antes del titulo? Como si fuera una seccion de un diario?
Siempre aparece por debajo del post y lo quiero cambiar.
Muchas gracias
agustin
www.hispanofc.net
SR.HISPANO, suponiendo que ya tienes etiquetadas tus entradas, ve a tu plantilla en edicion html y expandir artilugios marcado localiza este código que es el que pertenece a las etiquetas:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
Tienes que moverlo a justo antes de:
<h3 class='post-title entry-title'>
que está más arriba.
USA VISTA PREVIA ANTES DE GUARDAR DEBERIAS VER LAS ETIQUETAS AHÍ DONDE QUIERES
EXCELENTE ROSA Y MIL GRACIAS!! Una ultima cosita. se puede cambiar la PALABRA ETIQUETAS por otra? Por ejemplo: SECCION?
SALUDOS Y OTRA VEZ GRACIAS
SR.HISPANO, ve a la parte de edición (donde se añaden los elementos) y veras que en la caja que simula el "cuerpo" de las entradas, hay un "editar" pincha ahí para cambiar la palabra en las etiquetas.
Aquui de nuevo preguntando, que verguenza :(, soy medio brutico, debajo de este codigo : h2.date-header , no encuentro el float:left ni el .post h3 a:hover. Si te sirve de algo aqui te dejo lo que me aparece, perdon si te enredo :
h2.date-header {
font-weight:normal;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
margin:0;
padding:0;
}
.post {
margin-top:8px;
margin-$endSide:0;
margin-bottom:24px;
margin-$startSide:0;
}
.post h3 {
font-weight:normal;
font-size:140%;
color:$postTitleColor;
margin:0;
padding:0;
}
.post h3 a {
color: $postTitleColor;
}
.post-body p {
line-height:1.5em;
margin-top:0;
margin-$endSide:0;
margin-bottom:.6em;
margin-$startSide:0;
}
.post-footer {
font-family: Verdana, sans-serif;
font-size:74%;
border-top:1px solid #BFB186;
padding-top:6px;
}
.post-footer a {
margin-$endSide: 6px;
}
.post ul {
margin:0;
padding:0;
}
.post li {
line-height:1.5em;
list-style:none;
background:url("http://www.blogblog.com/scribe/list_icon.gif") no-repeat $startSide .3em;
vertical-align:top;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .6em;
padding-$startSide: 17px;
margin:0;
h2.date-header {
font-weight:normal;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
margin:0;
padding:0;
}
Lo añades tu directamente justo debajo de la primera línea:
h2.date-header {
float:left;
font-weight:normal;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
margin:0;
padding:0;
}
Y para el post h3, leete bien la entrada, ya que ahí mismo digo que si no está en la plantilla puede añadirse sin problemas, por ejemplo debajo de :
.post h3 a {
color: $postTitleColor;
}
Ya me funciono jejeje muchisimas gracias por tu paciencia y dedicacion, espero que te este yendo bien
otra que pregunta un monton...muchas gracias por tu ayuda...
Mi duda es que debajo de la entrada me aparece.. 4 cosas para mi demasiadas y se ve mal, quisiera que estu vieran en diferentes lineas...pero no se hacer en la plantilla el espacio...no se si me explico...por favor...pasate por mi blog y mirame como puede quedar mejor lo de los comentarios, vinculos, etc...Muchas gracias y perdona por ser pesada...
http://lamanchegaloca1.blogspot.com
Perdona y otra pregunta he intentado arriba encima del titulo lo de la suscripcion por e-mail, pero me parece que he hecho algo mal, me lo podrias mirar si te sale?
gracias...
Maryquylla, en la parte de edición de tu panel (donde añades nuevos elementos) está la "cajita" del elemento de entradas, pincha ahí en "editar", en la ventana que se te abre verás las opciones que dices parapoder anular las que no necesites. Ahí mismo abajo, hay unos cuadraditos que representan cada opción, comentarios, etiquetas, etc, esos cuadraditos pueden arrastrarse ahí mismo para colocarlos unos debajo de otros y como estén ahí es como se verán en el blog.
Lo de suscripción por email está en el lugar correcto, o sea, sobre la primera entrada que se ve al acceder al blog, lo que sucede es que sobre esta entrada has colocado un slide, por eso el panel de suscripción se ve debajo de el...
Rosa como estas? hace mucho no pasaba...te tengo una consulta..me pasa que cuando posteo en mi blog los titulos del post actualizado no se ven y tampoco la fecha..me podrias explicar que debo hacer y por q motivo pasa eso? el blog como siempre de 10 !
.con.ganas.de.huir. yo veo todos los títulos de tus entradas y las fechas sin problema :-X
Saludos Rosa espero que estes bien, tengo una consulta, quite la fecha de la derecha pk me entorpecia cuando escribia un titulo, a lo mejor escribo titulos largos jejeje, en explorer el titulo se mezcla y se ve feo con las 1eras lineas del post y no se puede entender bien, tambien le reduje el font size a 85 a ver, y nada, que puedo hacer en este caso ?? En firefox ta bien, pero no todos en mi pais lo usan
DoN CeSaR , perdoname cielo :( supongo que por un error en Blogger me he dado cuenta de que no me llegó el aviso de algunos comentarios, este entre otros. Lo siento.
Creo que ya lo has arreglado no??
Hola Rosita querida, descuida si lo solucione, le quite el float right y le modifique algunas informaciones ahi leyendo, se ve un poco mejor, lo que sucede es que si reduzco las letras se reducen todas incluyendo el titulo, quisiera ponerle a los titulos un tamano y a las letras otro, pero muchas gracias espero que te este yendo bien de salud y tu familia
DoN CeSaR, gracias por tu comprensión :D
Para cambiar el tamaño de los títulos (solo de los títulos de las entradas) es aquí:
.post h3 {
background:#F7BE81;
border: 0px #FFFFFF; height: 30px;
font-weight:normal;
font-size:120%;
color:#0066CC;
margin:0;
padding:0;
}
En font-size:120%;
Hola Rosa tengo una duda, aunque la manera de mostrar la fecha en mi blog
es diferente quisiera saber que puedo hacer para que se vea como en este blog explica lo que me molesta es que no puedo hacer que el fondo azul del titulo sea menos alto y que este centrado ademas del subrayado del titulo espero que me ayudes chau.
Hola rosa, en primer lugar "Gracias por existir" y mi consulta es: ¿Por que a mi no me aparece la fecha en las entradas? Supongo que lo quité, pero ahora quiero ponerla. jaja
http://dosespiralesenuna.blogspot.com/
Zazu , en la pestaña de "Edición" pincha en Entradas del blog donde dice "Editar" y marca la opción que seguramente has desmarcado.
una vez mil gracias por el tiempo me sirvio de mucho este tema gracias, he notado que en muchas plantillas vienen un poco diferente, ojo chicos y chicas es cuestion de observar bien y perderle el iedo al cambio, ojo no guarden hasta que le den vista preliminar y chequen que quedo bien, por aca sigo rosa sacandole provecho a tus tutoriales mil gracias.
lokin510051 ¡Sabios consejos! así es, siempre que se pueda...¡vista previa! :D
Hola Rosa, la verdad es que siento tener que molestarte, pero por más vueltas que le doy al html no hay manera, te cuento a ver si tú me puedes echar una mano: si ves mi blog verás que después del título de la entrada aparece lo de las etiquetas, lo he tocado por todas partes y no hay manera de quitarlo de ahí, me gustaría que apareciera justo al final del post. Un saludo y un millón de gracias de antemano.
catadebrujas No puedo ver tu blog porque no compartes tu perfil ni me has dejado un enlace...
Vaya, disculpa, q despiste !!! Pensaba que al pinchar en mi usuario salía el blog jejeje Disculpa, aquí lo dejo:
http://www.catadebrujas.blogspot.com
catadebrujas Ve en tu panel a Edición HTML y marca la casilla de "expandir las plantillas de artilugios", localiza este código:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
Lo copias y borras el original de la plantilla.
Vas hacia abajo hasta que localices esta línea:
<div class='post-footer-line post-footer-line-1'>
Pega el código que has copiado justo debajo.
Usa vista previa antes de guardar.
mmm... ¡¡¡ solucionado !!! Te estoy realmente agradecido. Muchas gracias por tu atención, de verdad. Un saludo.
Hola Rosa, siento de verdad tener que molestarte de nuevo jejeje pero prometo que esta vez es una duda muy pequeña muy pequeña: si ves mi blog, al final de la entrada, donde aparecen las etiquetas y quién lo ha publicado y etc. ¿cómo puedo hacer para que el catadebrujas aparezca en negrita tal y como aparece lo de la etiqueta? De verdad Rosa, muchas gracias.
http://www.catadebrujas.blogspot.com
catadebrujas Veo que lo has subrayado como las etiquetas, así que no te será difícil ponerlo en negrita.
<span class='fn'><b><u><data:post.author/></u></b></span>
mmm jo no era exactamente eso a lo que me refería, tal vez no me expliqué bien, porque si hago eso, que ya me había pasado por la cabeza como con el subrayado lo que ocurre es que se sigue viendo de color gris pero más grueso, lo que quería conseguir es que se viera de color negro tal y como se ve lo de las etiquetas
Otra cosa que quería consultarte es si tú sabías si existe la posibilidad de crear dos tags de etiquetas, es decir, en una pongo unas cosas y se ven por ejemplo en etiquetas y en otra por ejemplo otras cosas también etiquetadas (ains que rabia no poderme explicar mejor jejeje como no sé cómo se llaman estas cosas no sé cómo explicarlo) pero algo así para entendernos como dos nubes de etiquetas en el mismo blog, ¿es eso posible Rosa? Porque he estado buscando por ahí y no he encontrado nada y ya no quería molestarte tanto, de verdad.
catadebrujas En negrita, es en negrita, que no es lo mismo que de color negro...
Si tienes el código del que hablabamos en el comentario anterior tal que así, es decir, con el span class='fn' entonces puedes hacerlo usando CSS.
Coloca antes del ]]></b:skin> de la plantilla esta línea:
.fn{color: #000000;}
catadebrujas En forma de nube es difícil (creo a voz de pronto). Hacer que un gadget de etiquetas muestre solo las que queramos, ya no lo es tanto, de hecho ando probando una modificación que en breve publicaré para hacer eso.
;)
Arreglado, te pido disculpas por la confusión y nuevamente muy agradecido. Un saludo.
Pues estaré muy atento a lo que vayas publicando porque es justo lo que necesito, gadgets para incluir las etiquetas que nosotros queramos.
(Lo de las nubes era para entendernos, que ya has visto lo pez que ando en explicaciones de códigos... :S)
catadebrujas Todo bajo control...de momento :D
Hola Rosa (jejeje zí, el pezao otra vez jejeje) pero es que acabo de probar un código que he encontrado para un slideshow en las entradas y lo he probado, pero curiosamente lo único que hace es alinearlas en vertical, creo que he puesto bien el código pero... no sé, yo quería un slideshow así sencillito. Gracias de verdad.
Desde luego esas fotos no son mías jejejeje iban con el código... :S
catadebrujas ¿Qué imágenes y qué código? :O
Hola Rosa... intento poner la Fecha en la sección de los comentarios [Posteado por 3705 - 0 comentarios - Fecha]; estoy usando la plantilla Minima Black de Blogger bastante modificada, pero basicamente es la misma... www.postabanana.blogspot.com
Te agradezco mucho una respuesta, tu blog siempre es de gran inspiración y ayuda para los que estamos aprendiendo...! Un saludo, 3705.
Disculpa Rosa, lo había quitado porque quedaba realmente horrible, sólo estaba haciendo una prueba. Me refería al código que he vuelto a poner para que puedas verlo que hay en el primer post como un slideshow.
Es un slideshow realmente sencillo que me gusta mucho pero lo he probado en mi blog y lo que hace es alinearme las imágenes en vertical nada más. ¿Por qué sucede eso? ¿Por qué no hace el slideshow? Un saludo Rosa.
catadebrujas No se que pasa pero como que no nos entendemos...
No veo ningún código en el código fuente, lo único que veo son dos imágenes subidas a la entrada una después de otra...
3705 ¿Hablas de la fecha o de la hora de publicación? Porque son dos cosas distintas y normalmente ahí lo que se pone es la hora de publicación de la entrada.
Rosa me referiero a la fecha y hora de publicación de la entrada...
3705 En fin...si quieres ahí la fecha vale. Te lo decía porque normalmente la fecha ahí no viene, solo la hora de publicación...
Localiza en tu plantilla con los artilugios expandidos, esto:
</div>
<div class='post-footer-line post-footer-line-3'>
Justo antes de eso, colocas el código para la fecha y la hora:
<h2 class='date-header'><data:post.dateHeader/></h2>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
Gracias por ayudarme con esto Rosa! me sirvió muy bien...la fecha aparece ahora abajo de los post, el unico inconveniente es que sigue apareciendo arriba también; Hay alguna manera de anular esa? Un saludo!!!
3705 Pues localizas la misma línea de la fecha, pero no la que tu has añadido, sino la que ya estaba:
<h2 class='date-header'><data:post.dateHeader/></h2>
Y la borras...eso es de lógica si no quieres las dos.
muchisimas gracias Rosa!!! un saludo :)
Hola Rosa.
Mi pregunta es si es posible que el título de la entrada quede un poco más abajo que la fecha.
Me explico. La separación es tan pequeña que la fecha parece la continuación del título.
¿Qué tengo que modificar para subir la fecha o bajar el título?
Un saludo y gracias.
Jorge Localiza el código CSS de la fecha:
h2.date-header {
float:right;
font-weight:normal;
text-transform:uppercase;
letter-spacing:.1em;
font-size:66%;
margin:0;
padding:0;
}
Y ponle un valor en padding es decir 10px o lo que veas en lugar de 0
Disculpa que se me olvidaba en el anterior comentario. ¿Qué código CSS es necesario para separar la columna lateral del blog de las entradas? Me refiero a esa línea discontinua que aparece en El Escaparate.
Gracias y perdona por no saber sobre que entrada ubicar este comentario. Andaba buscando por todas tus entradas y no lo ví.
Jorge En esta entrada te orientarás, espero :D:
http://elescaparatederosa.blogspot.com/2007/05/barras-horizontales-de-separacin.html
Muchas gracias Rosa.
Estuve jugando con eso del padding antes de preguntarte pero no me apañaba.
Finalmente lo he conseguido modificando el padding del título del post. Ahora tengo que ajustar algún detalle más.
Ahora revisaré esa entrada sobre las barras de separación.
Una vez más, muchísimas gracias.
Hola mi estimada Rosa si pudieras ayudarme con una plantilla que tengo lo que pasa es q no me muestra la fecha de la publicación solo aparece undefined-undefined-undefined no se si puedas ayudarme a solucionar
esta es la drección http://creosientoypienso.blogspot.com/
gracias
tonkoniVe a Configuración - Formato y modifica el formato de cabecera de fecha, a modo que aparezca primero el mes, el día y luego el año, por ejemplo: Marzo 10, 2010
Luego cambia el formato de fecha del índice de archivos mostrando primero el mes y luego el año, por ejemplo: Marzo 2010
Cambia también el formato de hora mostrando primero el día en letras, luego el mes, el día en número y el año, por ejemplo: miércoles, Marzo 10, 2010
En todas las que he probado esto funcionó.
rosa tengo un problema en mi blog cuando publico me sale en la entrada la fecha que no es.... sale 22 de nov del 2009... y ya cambie la fecha en configuracion esto es un problema en la plantilla?
espero tu respuesta gracias :)
aqui te dejo como se ve rosa ayudame :( www.bigmusicking.blogspot.com
carlos Ni idea de porque pasa eso... si fuese la hora si, pero la fecha en todas sale en el año en que estamos...:O
awww rosa entonces tendre q cambiar de plantilla :(( ?
carlos Es que no lo se a que puede ser debido eso... sinceramente.
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