11/9/13

Cómo poner la fecha redonda o en un círculo en Blogger

Mi amiga Ana, la creativa gráfica con la que hago los diseños de blogs, hablando un día de no-sé-qué me dijo que en Blogger no se podía poner la fecha de manera que se viera sobre un redondel o circulito.

Y yo: ¿Cómo que no?

Y ella: Pues porque se lo pregunté a... *bip* (que no es plan de decir el nombre - alguien que tiene cursos para blogs) ...y me dijo que no se podía, que tenía que ser un blog de Wordpress.

De esto hace siglos ya. Tranquilamente 6 meses o más.

Y a mi me pareció muy raro, porque poder se puede hacer de todo, otra cosa es que no sea tan fácil dar con ello; pero vamos, que lo dejé ahí y nunca me lo planteé más. Yo casi como que hasta asumí que no se podía.

Hasta que hace poco, no sé cómo, diseñando el blog de Diario de Imagen y Estilo surgió la idea de poner la fecha de forma redondeada para hacerlo un poco más especial.


Así que le dije: Dame un par de días que veo si sé hacerlo. 

Obvio que lo primero que hice fue buscar en Google jaja. Pero no lo encontré.. :(

Y entonces pensé: a ver Blanca, piensa un poco.

Y la verdad que debería pensar más a menudo, porque di con ello muy fácilmente al final. Hay otras cosas que me cuesta más sacarlas, que escribir CSS a veces es como una lengua cualquiera, tú puedes hablar un poco, pero si no es tu idioma, igual no te expresas bien o con propiedad, y no te entienden los nativos.

Y con esto igual. Con el añadido de que si no pones exactamente lo que tienes que poner... no sale :P

Pero bueno, ahora que he dado con ello, para vosotras es muy fácil, porque es solo cuestión de copiar y pegar. Y como estoy contenta por mi cumple-blog os lo voy a explicar :)

Necesitáis añadir en CSS:

.date-header span {
padding:23px 7px 23px 7px;
border-radius: 100px;
/*pb*/
}

Nota: 

A) Eso sí, el padding ese es el que le he puesto al blog de Diario de Imagen y estilo, pero necesitareis cambiarlo dependiendo del tamaño de vuestra fuente.

Es decir, si la fecha la tenéis con una fuente más grande, necesitaréis un círculo más grande, y por tanto deberéis ajustar el padding.

El primer número (23 px en el ejemplo) es el margen/esapacio que le damos arriba. Es decir, una fecha con el primer número a 20 o 30 y los demás a cero, aparecerá con color por arriba pero no en el resto de los lados.

El segundo valor es el de la derecha. El siguiente el de abajo. Y el último el margen de la izquierda.

Entonces, para que sea un círculo perfecto, obviamente arriba y abajo debéis ponerle el mismo valor, o sino no será un círculo. Y a un lado y al otro lo mismo.

B) Y luego el 100% es lo que lo redondea del todo. Pensad que la fecha por defecto, si le ponemos color de fondo, es cuadradita.

Mirad como queda si le pongo 0 en el radio del borde:


En cambio, si le pongo un valor se me van redondeando las esquinas:


Y si le pongo 100, pues ya se me redondean lo máximo.

Nota 2: 

Como al hacerlo círculo tuve que estirar el margen de color hacia abajo, el título me quedaba muy pegado a la fecha, así que tuve que darle algo de espacio entre la fecha y el título del post.

Para ello puse en CSS:

h3.post-title {
padding-top:1em;
/*pb*/
}

De este modo os separa el título del post de la fecha.

Podéis cambiar el 1em (otra unidad de medida, que no es píxeles, un día lo vemos) por un valor mayor o menor dependiendo de si queréis darle más o menos espacio entre el círculo y el título del post.

Además también le podéis dar valores decimales, no sólo números enteros.

Eso sí, pensad que HTML y CSS son idiomas basados en el inglés. Los valores decimales se escriben con punto (0.5em), que con comas como sería en castellano no funcionan.

Y eso es todo señores.

Espero que os haya gustado.

No olvidéis que el plazo de participación del sorteo de las 3 cajas de Crafty Box está abierto hasta el lunes que viene a las 11 h, momento en el que comenzará OTRO sorteo... :)

Podéis leer cómo participar y apuntaros pinchando aquí.

Un besazo,
Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

91 comentarios

  1. Muchísimas gracias!! Ahora me pongo con ello... a ver si lo consigo! porque esto del html... tiene su miga!! (y menudos quebraderos de cabeza!). Buen trabajo como siempre Blanca!!

    Nuestro blog: Con la realidad en los talones


    Miss Giggles

    ResponderEliminar
  2. WELL DONE BLANCA!!!!! que bien,... este tipo de info es la que nos hace que prefiramos un millón de veces venir y visitarte tantas veces podemos!!! Eres muy generosa y eso no hay con qué pagarlo!!! Gracias por compartir conocimientos, tips y cositas útiles!!! Un abrazo!!!!

    ResponderEliminar
  3. Muy guay¡¡ puede quedar muy bonito, voy a ver si lo intento¡¡ Gracias¡

    ResponderEliminar
  4. Ah pues me parece muy mono asi. Lo probaré!!! Muchas gracias.
    Anne

    ResponderEliminar
  5. Gracias Blanca! tengo que probar cuando saque un hueco ^_^

    ResponderEliminar
  6. Pues está genial, tenemos que ir cambiando muchas cosilla ya que somos nuevas así que nos apuntamos tus truquis, gracias :D

    ResponderEliminar
  7. Muchas gracias, y el color ??? de que depende ????. besotes.

    ResponderEliminar
    Respuestas
    1. Lourdes, eso se puede personalizar sin problema en el diseñador de plantillas (avanzado - cabecera de fecha - color de fondo)

      Besos,

      Eliminar
    2. Buenas....

      Ya no está esa opción, lo he probado y me sale transparente..... ¿Como puedo elegir el color del fondo de la redondita?

      Gracias!

      Eliminar
  8. Cuantas cosas nos enseñas, madre mía, falta tiempo para hacerlas todas. Bss.

    ResponderEliminar
  9. Me encanta! eres un sol guapiiii!! besitos!!

    ResponderEliminar
  10. Qué dominio tienes del css!!!!!!! Me guardo el tip, porque me encanta!
    Muchas gracias

    ResponderEliminar
  11. Madre mía Blanca: Tú sí que SABESSSSSSSSSSSS!

    ResponderEliminar
  12. Cada dia me sorprendes más, quería modificar un poco mi blog y contigo es posible, me encatan tus post!

    ResponderEliminar
  13. ¡Un montón de gracias, Blanca! A mí particularmente me queda chulísimo porque mi logo es redondo y le he puesto a la fecha los colores del logo. Gracias nuevamente por ayudarme a personalizar más mi blog. Un beso.
    ¡Ah, otra cosa! Hace días estaba por entrar para recomendarlo. Sería genial que pusieras un tutorial para trabajar y crear documentos en PDF.

    ResponderEliminar
  14. Me viene genial estoy rediseñando la nueva plantilla de arriba abajo y seguro me animo a ponerlo asi, me encanta!!

    ResponderEliminar
  15. ¡Gracias por todas estas cosas que nos descubres!
    :) Muahhh

    ResponderEliminar
  16. Pero lo de añadir en CCS qué es exactamente??
    No me entero... :(

    ResponderEliminar
    Respuestas
    1. Hay una opción que se llama Añadir CSS en el diseñador de plantillas.

      María, si aún eres nueva en esto te recomiendo mis cursos uno y dos para blogueras así como leer tutoriales míos atrasados. Te darán la base para seguir mis tutoriales porque no puedo escribirlos todos de cero por completo

      Un beso!

      Eliminar
  17. A mi por más que lo intento no me sale. Pero gracias por todos tus conejos!

    ResponderEliminar
  18. Ya lo he puesto en mi blog. Me gusta como queda. Tenía elegido el color transparente y tardado un ratito en caer. Ainssss!!!
    http://cosotela.blogspot.com.es/

    Muakkk

    ResponderEliminar
  19. Hola Blanca..
    Como sabes el CSS no me funciona.
    De que otra forma podría hacerlo, por favor?
    Gracias

    ResponderEliminar
    Respuestas
    1. Pegalo en la plantilla HTML.

      Si no limpia todo. Restaura la plantilla, borra el caché, elimina las cookies, pasa CC Cleaner, etc.

      Un poco de paciencia y Añadir CSS volverá a funcionar

      Besos

      Eliminar
    2. Blanca me pasa lo mismo, tampoco me va lo de Añadir CSS. Y me estoy volviendo loca para añadirlo en HTML, me podrías decir exactamente donde se pone.

      Estaría genial que hicieras un post donde explicases que hacer en caso de que no vaya el Añadir CSS

      Besos,

      Mariví

      Eliminar
  20. Queda muy bien y distinto, pero donde se pone eso de CSS, es en la pantallita de HTML??
    Enseñas cosas muy interesantes pero a veces pienso que algunas son para personas que sepan ya bastante de informática, no se...o yo soy muy torpe :((

    ResponderEliminar
    Respuestas
    1. Ayla, en este blog hemos empezado de cero-cero.

      Si aún hay cosas que no entiendes te recomiendo que hagas mis cursos de diseño de blogs (el Curso Uno, que además cuesta solo 20 euros, es la base de todo) y leas posts atrasados.

      No puedo repetir cada paso y cada cosa durante toda la vida. Los tutoriales van subiendo de nivel según pasa el tiempo. Imagina mi blog como la uni: no se aprende lo mismo en primero que en segundo que en quinto.

      Yo tengo que ir subiendo el nivel o escribir los tutoriales me costaría muchísimo tiempo.

      Añadir CSS está en el diseñador de plantillas. Diseño - Diseñador de plantillas - Avanzado - Añadir CSS. Pegas el código y aplicas los cambios.

      Eliminar
    2. Gracias por la cadenita de pasos del CSS :D

      Tienes razón por supuesto, claro el que te sigue desde el principio si cada día le cuentas las vocales pues se aburre, intentaré ir leyendo desde el principio :)
      Tus cursos ya me los he mirado ya, jeje, pero estoy en un mal momento, sin trabajo...y bueno....a ver si consigo ir haciendo alguno, de todos modos ya contactaré contigo porque tengo algunas duditas sobre los cursos. A ver si pronto puedo ir a por ellos

      Besote!!!

      Eliminar
  21. A mí no me sirve, no sé porqué pero no me sale en ningún sitio la opción de escoger el color del fondo ya que no me sale la opción que decías de avanzado - cabecera de fecha - color de fondo.

    Puede ser por ser una plantilla distinta?

    ResponderEliminar
    Respuestas
    1. El color de fondo de la fecha, creo que lo escoges en PLANTILLA - AVANZADO - CABECERA DE FECHA. Y le das color de fondo a la fecha y a la fuente.

      Eliminar
    2. ain...si a mi tampoco me da opcion de color de fondo en la fecha, sino solamente color de la fuente de la fecha...vaya royo blogger, como es posible? `pero tienes razon a lo mejor en otras plantillas si lo deja escoger...no se....habra que mirarlo

      Eliminar
    3. Si chicas, probé a cambiar de plantilla y ya sí, aun así prefiero no tener ese detalle y seguir con mi plantilla, me gusta más. La mía es la Ethereal.

      Eliminar
  22. ¡¡Me encanta este tema!!

    El efecto de bordes redondeados queda chulísimo y da un toque muy original al diseño :)

    ¿Has probado a aplicar un efecto hover al mismo código? ¡es una pasada!

    Bueno, que me lio, con este tema me has tocado la fibra jajaja

    ¡¡Feliz tarde, guapa!!

    ResponderEliminar
    Respuestas
    1. Celia, has hecho todos mis cursos y me conoces un poco jaja

      Ya sabes que chuminadas las justas. O sea, blonditas y cosas monas en el diseño, las que quieras, pero cositas que se mueven por la página, etc etc me parecen una horterada.

      Ahora, que para gustos los colores y respeto que cada una haga lo que quiera pero tú ya sabes que para mi menos es más... ;)

      Besote!

      Eliminar
    2. jajajaja

      Pues sí, ¡para gustos los colores!

      Pero los efectos molan... aunque yo tampoco los uso, la verdad ;)

      (vamos, que el pajarito de twitter volando no le veré nunca por aqui, ¿no? jajaja)

      Buenas noches, guapa :)

      Eliminar
  23. Qué bueno! me lo apunto por si decido cambiarlo

    ResponderEliminar
  24. Gracias Blanca! Ya hace tiempo que lo había visto y me gustaba mucho, así que lo he puesto!
    Un besote ;)

    ResponderEliminar
  25. Como siempre muchas gracias por la ayuda Blanca

    ResponderEliminar
  26. Que genia Blanca!!! hace rato quiero hacer esto en mi blog.....pero aora no se si me animo!!? soy tan principainte que por ahi hago lio!!!
    pero me parece que voy a probar igual1
    beso

    ResponderEliminar
  27. Ayyys no me sale! No sé qué hago mal...
    Le doy a personalizar/Avanzando/Añadir CSS/pego
    .date-header span {
    padding:23px 7px 23px 7px;
    border-radius: 100px;
    /*pb*/
    }
    Aplico al blog
    Le doy a ver blog y me sale la fecha igual que estaba...
    Help!

    ResponderEliminar
  28. Hola!

    Creo que hay un error tipográfico en el código: no es 100px sinó 100%

    Saludos!

    ResponderEliminar
    Respuestas
    1. Tienes razón, pero en realidad funciona de las dos maneras así que da igual. También se puede poner em en lugar de px y también funciona

      Pero gracias por el apunte, que soy super despistada!

      Besos,

      Eliminar
    2. No me funciona igual!! que será?

      Eliminar
  29. ohhh no tenia ni idea!!! me encanta :D
    muchísimas gracias!!!!
    Besines

    Alba, Niña Bonita Accesorios

    ResponderEliminar
  30. ¡Muchísimas gracias Blanca, queda genial! Hasta me ha hecho ilusión porque ha sido mi primer CSS!!!
    Besos!

    ResponderEliminar
  31. Hola Blanca, lo he intentado y no me sale, varias veces y nada. Pues nada, seguiré intentándolo en otro ratillo que tenga. Me apetecía ponerlo porque no me gusta poner muchas cosas en el blog, soy más bien sencilla, pero eso me parecía muy chulo. De todas formas, muchísimas gracias por enseñarños a ponerlo. Un besico.

    ResponderEliminar
  32. Hola Blanca! a mi tampoco me sale :(

    ResponderEliminar
  33. Voy con retraso con tu blog, pero mil gracias pro compartirlo!

    ResponderEliminar
  34. Bingo Blanca, Al fín he podido ponerlo. Además me ha quedado de lo más original porque no tengo ni idea de por qué razón me queda ovalado en lugar de redondo. Pero me gusta. Muy chulo tu consejo. Gracias maja! Ahora voy a por el de ponerlo junto al título del post.

    ResponderEliminar
  35. Pues yo meto el css y se me queda exactamente igual.

    http://softiesxtremo.blogspot.com.es/

    Tengo que hacer algo mas?

    ResponderEliminar
  36. A mi también ... coloco el CSS y nada que no me sale el circulito mmmm.
    http://pequestaller.blogspot.com.es/

    ResponderEliminar
  37. Yo tampoco he sido capaz... y he probado con diferentes plantillas, porque tengo varios blogs. No sé que hago mal! ¿Podrías explicarnos como hacerlos con HTML?
    Por cierto, es el primer día que ando por tu blog y ya me he enganchado! Me encanta1

    ResponderEliminar
  38. Bueno cariño, si lo de centrar el título me salió a la primera, lo de la fecha no me funciona. Ni en ninguno de los 3 blogs que tengo públicos, ni en los 2 que tengo privados. Pero vaya, que no pasa nada.
    De todas maneras, muchas gracias por compartir, reina....que nunca te digo ná.
    Besossss

    ResponderEliminar
  39. hay menos mal ya me salio!! no lo puse del todo redondo pero me gusts el resultado :3 me costo lo del color pero lo demas bien :D gracias!!!!!!

    ResponderEliminar
  40. Intenté hacerlo pero...depende de la plantilla que uno tenga? Yo tengo una de las que te da a elegir blogger cuando la vas a hacer al blog, pero por más que cambié los valores para que salga mas grande, pues no he podido. :/ besote hermosa si me puedes ayudar genial ^^

    ResponderEliminar
  41. lo he pegado en el css avanzado y nada :0

    ResponderEliminar
  42. Estoy como Lyra, Tampoco me sale. Gracias Blanca por todo cuanto nos enseñas.¡Besotes!

    ResponderEliminar
  43. gracias ,estoy dejando el blog guapisimo.
    www.tachuelasdiyandco.blogspot.com

    ResponderEliminar
  44. hola blanca!! mil gracias por tantos detallitos monos! lo hice en septiembre y estaba genial hasta ahora que como el dia y el mes solo tienen un digito (9/1/14) se deformo todo y si intento arreglar uno deformo otro....no se como hacer y me encantan los circulitos! no me quiero deshacer de ellos...ain...a alguien le paso?

    ResponderEliminar
  45. a mi igual, dependiendo de que día del mes el círculo sale más círculo o achatado por los bordes. Y es que blogger no te deja poner la fecha con ceros xej: 01.02.13, sino 1.2.13, porque con ceros siempre serían los mismos dígitos. No se si hay solución a esto....

    ResponderEliminar
  46. Muchísimas gracias!!
    Queda estupendo, mil gracias por compartir ;-)
    Un beso!

    ResponderEliminar
  47. ¡Qué sencillo y bonito queda! Muchísimas gracias :)

    ResponderEliminar
  48. Jo, yo lo he pegado en el CSS, pero nada. ¿Qué puedo hacer, Blanca? :)

    ResponderEliminar
  49. No me funciona en lo absoluto!! :´(

    ResponderEliminar
  50. O yo estoy medio tapada o algo porque no me sale :S puse lo que dices y no sale... igual y es por la plantilla, pero no tengo éxito :(

    ResponderEliminar
  51. Hola! Yo tengo un problema: lo puse en CSS y queda genial. El tema es que sólo se aplica a la primer entrada del blog. En el resto, va variando el tamaño del círculo. Y, si modifico el padding, también se modifica la primera entrada. Es decir, nunca queda un círculo perfecto para todas las entradas. ¿Hay alguna forma de que quede fijo y no se cambie? Espero tu respuesta! :)

    ResponderEliminar
    Respuestas
    1. A mí me pasa algo parecido, sólo me funciona en la primera entrada. ¿Lo has conseguido arreglar?

      Eliminar
  52. A mí tampoco me funciona.. he hecho los pasos una y otra vez y no consigo el efecto :(
    Ya había usado el CSS con otros tutoriales tuyos y perfecto, pero esta vez no. No sé si es normal que a algunas nos funcione y a otras no y si depende de la plantilla de cada una. La mía es simple.
    Gracias Blanca, eres increíble!

    ResponderEliminar
    Respuestas
    1. A mí me pasaba lo mismo y simplemente era que tenía color transparente en la opción de color de la cabecera.

      Saludos!!

      Eliminar
  53. Blanca, me encanta tu blog y estoy aprendiendo mucho con él. Esta vez no me sale, no hay manera de cambiar el color de fondo de la fecha y haciendo lo que nos dices supongo que el circulito es blanco y por eso no lo veo. No se puede cambiar el color des de CSS o de alguna otyra manera? A mi no me sale la opción "cabezera de fecha". Me puedes ayudar? ;)

    ResponderEliminar
  54. Blanca, no me funciona... no me ha hecho ningun cambio. Lo tengo exactamente igual que antes. Jo, porfis me ayudas? mencantaria tenerlo como circulito

    ResponderEliminar
  55. Hola! A mí me hace una cosa muy rara: la primera fecha me sale bien, y la segunda directamente no sale. Muy turbio. Estoy probando sobre un blog secundarió, te lo dejo aquí por si lo quieres mirar...

    ResponderEliminar
  56. Hola guapa.
    Acabo de hacer tu tutorial, junto con el de poner el título al lado de la fecha... Pues todo ha quedado bien, salvo por el hecho de que no me aparece la fecha dentro de nada. Sigue con su fondo blanco :S
    Que aún así, me gusta como queda, pero es más que nada por la curiosidad de saber porque no se ve jeje
    Saludos!

    ResponderEliminar
  57. Hola, acabo de descubrir tu blog y he de decir que me ha parecido más que increíble, además de muy factible para quienes queremos dar un nuevo diseño al blog, más llamativo y mucho más bonito. Justo estaba buscando esta idea, si era posible colocar la fecha de un modo distinto, ¡y he dado con esta entrada! Ha sido toda una suerte, ya que no encontraba nada.
    He seguido tus pasos y he podido lograrlo, aunque el círculo de la fecha me queda muy pegado al menú de páginas de mi blog, no sé si hay algún modo de arreglarlo y poder separarlo un poco más. Espero que puedas dedicar algún minuto a responderme, o decirme al menos si tienes algún tutorial donde aprenderlo. Creo que tu blog tienen mucho potencial, además de ayudar a personas como nosotras que nos estamos iniciando en todo este mundillo.
    Muchísimas gracias, ¡y felicitaciones!

    ResponderEliminar
  58. Nada, llevo varios intentos y no se modifica la fecha en absoluto. He cambiado las dimensiones del padding y tampoco. Lo dejo por hoy ya, porque me estoy estresando jeje. Gracias, no obstante. Un abrazo.

    ResponderEliminar
  59. Hola, blanca, me encantó el tutorial y lo aplicaré <3 aprovecho para hacerte una pregunta: ¿Sabes cómo redondear la imagen del "perfil" en blogger?
    Aparece en un cuadrado y se ve feo. Una vez logré redondearla con un codigo de css, pero luego cambié de plantilla y nunca más logré encontrarlo, así que ahora estoy pensando en quitar el perfil de mi blog, pero no quiero :/
    No sé si entiendes a lo que me refiero, pero espero que puedas ayudarme.

    Me encanta tu blog <3

    ResponderEliminar
  60. Maravilloso, al final lo logré, después de mil intentos... así que: gracias!!
    Si quieres te pasas: deentradaunlibro.blogspot.com

    ResponderEliminar
  61. Hola Blanca!
    Decirte, que acudo a tu blog,cada vez que me entra la vena por cambiar mi blog (que es muy amenudo) y hará un año más o menos, utilicé esta entrada para crear un recuadro que bordeara mi fecha, bien, ahora quiero quitarlo y no consigo la manera de hacerlo, ponerlo trasparente, y tampoco, he borrado caché, pero me da la impresión de que mi css no me hace ni caso.
    Sabes si hay algún problema con esto? te lo agradecería.
    Mil gracias!!

    ResponderEliminar
  62. Hola Blanca!!
    Ando en plena renovación y "toquiteo" de mi blog.
    He estado realizando esta mañana tus tutos de redondear la fecha de los posts y de alinearla con el título. Y no sé porqué razón, hay fechas en las que me sale el círculo perfecto y otras fechas en otros posts en los que se queda tipo óvalo. Claro, queda raro.
    ¿Podrías echarme una mano?
    Te dejo mi blog: www.menudosremolinos.com
    Abrazos y gracias por todos tus consejos que me vienen fenomenal

    ResponderEliminar
    Respuestas
    1. Hola! A mi me pasa lo mismo y me he dado cuenta que es cuando la fecha tiene más o menos dígitos, o sea, 1/1/15 o 10/10/15. De hecho, al blog del que habla que en este post también le pasa.
      A ver si Blanca nos pude decir como hacer para que quede fijo.

      Eliminar
  63. Hola,

    No encuentro como cambiar el fondo de la fecha, me sale transparente.... ¿Alguien sabe como seleccionar el color del redondel?

    Gracias!

    www.puntxet.com

    ResponderEliminar
  64. Hola todo me funciono como lo hiciste en el tutorial, pero al igual que a nati, me queda muy pegado al menu de pestañas, existe alguna forma de bajar las entradas un pelin y asi que no se topen, gracias

    ResponderEliminar
  65. Hola Blanca! Muchas gracias por el truquito, esta genial. ¿Sabes si se podría hacer con imágenes?

    ResponderEliminar
  66. me sirvio mucho lo del espacio del titulo muchas gracias!!!!

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.