4 de julio de 2016

Dar formato a la fecha de las entradas de un blog

Decorar las fechas de las entradas el blog


Continuando la personalización de mi blog de aprendizaje, hoy voy a modificar la fecha para dar un mayor realce a esta información.


Configuración formato fecha


Empiezo por algo sencillo y básico como es configurar el formato de fecha a través del menú de Blogger. 
Accedo a Configuración-Idioma y formato.


Menú Blogger_Idioma y formato

Hacemos clic con el ratón sobre Formato de cabecera de fecha. Se despliega un menú y seleccionamos la opción que más nos convenga.


Menú Formato cabecera fecha

Ya tengo seleccionado el formato pero quiero personalizar la fecha en cuanto a tamaño, letra, etc.
Esto me obliga a trabajar con CSS.



Personalizar fecha del blog añadiendo código CSS


La forma más fácil y rápida es añadiendo código CSS a la plantilla mediante el menú de blogger (como ya he hecho en entradas anteriores).

Para eso me iría al  menú de Plantilla-Personalizar.

Personalizar Plantilla Blogger


Seleccionaría Avanzado-Añadir CSS.

Añadir CSS en Diseñador plantillas

Y añadiría por ejemplo el código siguiente,
  
.date-header span {
     color: yellow;
     background-color: navy;
     font-size: 12px;
 }

La fecha tendría una presentación como se muestra en la siguiente imagen.

Ejemplo tipo de fecha


El texto se presenta en color amarillo (yellow) con fondo en color azul navy y tamaño de 12px.




Personalizar fecha del blog modificando HTML de la plantilla (tamaño y color letra)


La opción anterior es más rápida y cómoda, pero tras lo explicado en la entrada Personalizar pestaña seleccionada del menú páginas del blog, en donde he comprobado que todo el código CSS que se va añadiendo de esta forma es fácil duplicarlo, opto por añadir formato editando directamente la plantilla del blog mediante HTML.

Para eso voy al menú Plantilla-Editar HTML.

Editar HTML plantilla blogger

Se abre la ventana donde se muestra el código de toda la plantilla. Me posiciono sobre cualquier punto de esta ventana, tecleo CTRL + F y en el buscador escribo date-header span.

Buscar "date-header span"


Este código forma parte del grupo /*Posts (entradas).

En principio solo hay las siguientes líneas con una única propiedad que define el color del texto.


 date-header span {

  color: $(date.header.color);

}


Como todo lo que está encabezado por el signo $ puede modificarse, elimino esta línea y añado las siguientes líneas (en azul) que ya escribí en el caso anterior cuando añadí directamente el código CSS accediendo a la opción de menú "Avanzado-Editar CSS".

.date-header span {
     color: yellow;
     background-color: navy;
     font-size: 12px;
 }

El resultado es el mismo.
Ejemplo tipo de fecha

  • color;_ define el color del texto, en este ejemplo es yellow (amarillo).
  • background-color;_define el color del elemento que contiene la fecha., en este ejemplo el color navy.
  • font-size;_se establece un tamaño de letra de 12px. 

 

Personalizar fecha del blog modificando HTML de la plantilla (tipo de letra y bordes definidos)


Ahora voy a añadir más propiedades (en rojo)

 .date-header span {   
     color: navy;
     font-size: 15px;

     font-family: gulim, sans-serif;  
     text-align: justify;
     border-radius:5px;
     background: radial-gradient(circle, burlywood 20%, white 80%, grey);   
     margin:0px;
     padding:6px 10px;


}


  • font-family;_Esta propiedad determina la fuente, en este caso es la fuente gulim y añado (separado por comas) sans-serif para que sea la segunda alternativa si la primera no se puede mostrar.
  • text-align;_El texto con la fecha estará justificado.
  • border-radius;_El borde del elemento que contiene la fecha tendrá sus esquinas redondeadas con un valor de 5px.
  • background:radial gradient;_Se establece un fondo degradado radial . Ver entrada Personalizar el fondo del menú horizontal en el blog
  • margin; padding;_Establezco valores para el margen y relleno. Ver entrada Margin, padding y border.

La fecha tras estos cambios es la que se muestra en la siguiente imagen.


Formato fecha entrada blog

Le he dado un efecto de etiqueta metálica con reflejos en las tonalidades base de este blog.


4 comentarios:

  1. El otro día empecé a toquitear en temas, y cambié la plantilla. por tanto se cambió también lel formato de la letra del título y de la fecha que tenía, que la tenía sin haber incorporado ningún código. Ahora no aparece eso de añadir CSS, y tampoco sé cómo cambiar la fuente de la fecha, antes se cambiaba igual que el título o similar.¿Sabes cómo puedo cambiar tamaño, fuente y color de la fecha= sin incorporar ningún código html, por favor, sino desde configuración avanzada
    mi blog es: lamaletadepili.blogspot.com
    o si no, cómo puedo volver al diseño de blog que tenía cuando publiquñé la última entrada=

    ResponderEliminar
    Respuestas
    1. Hola Pili, muchas gracias por tu visita y consulta.

      Comentas que has modificado el tema de Blogger. ¿Has realizado previamente una copia de seguridad de la plantilla antes de realizar los cambios? En caso afirmativo solo tendrías que restablecer la copia de seguridad para restaurar la plantilla al estado anterior a las modificaciones.
      Si no tienes una copia de respaldo entonces no puedes volver al diseño que tenías antes de modificar la plantilla.

      Para cambiar el diseño de la plantilla sin tocar HTML tienes que ir a:
      Tema – Personalizar – Avanzado
      Aquí puedes modificar el formato de las fuentes de Texto de la página, título del blog, título de la entrada.
      En Tema – Personalizar – Avanzado – Gadgets, puedes modificar la fuente de la fecha, pero es posible que modifique también el formato del título para el resto de gadgets que tengas añadidos a la plantilla.

      Otra opción para modificar el formato de fuente de la fecha es añadir CSS como se indica en esta entrada.
      De nuevo accedes a Tema – Personalizar – Avanzado – Añadir CSS

      y puedes añadir:

      .date-header span {
      color: navy; /*color de la fuente*/
      font-size: 15px; /*tamaño de la fuente*/
      font-family: gulim, sans-serif; /*tipo de fuente*/
      text-align: justify; /*justificación del texto*/
      background: white; /*color fondo*/

      }

      ¿No te aparece "Añadir CSS" dentro del menú de Blogger? He probado con diferentes plantillas y esta opción es la última dentro del menú Avanzado.

      No sé si esta respuesta te ha servido de ayuda. En caso contrario no dudes en consultar de nuevo. Estaré encantada de ayudarte en todo lo que me sea posible.
      Un saludo.

      Eliminar
    2. Hola, Mavicfe!

      Muchas gracias por tu rápida respuesta. La verdad, no tenía copia de seguridad. Sin embargo, finalmente el cambio de tema no me desagrada del todo y además será cuestión de acostumbrarme. Además, me han comentado que no queda nada mal, así que bien,
      Por otro lado, tenías razón, sí que me aparece lo de añadir códigos CSS, pero también aparece un apartado llamado cabeceras y fecha: entonces, ahí se puede cambiar tanto la fuente, color y tamaño.
      De todas maneras, muchas gracias por todo.
      Nos leemos! 

      Eliminar
    3. Hola Pili!

      Muchas gracias por tu respuesta. Me alegra saber que todo está OK. Lo cierto es que he visitado tu blog y me gustó mucho. Veo que has modificado la fuente de las fechas y de los títulos de las entradas. Te ha quedado estupendo, me parece un diseño creativo, agradable y con una fácil y cómoda navegación.

      Ya sabes que si tienes alguna duda aquí me tienes para ayudarte en todo lo que pueda.
      Me encanta viajar así que sin duda estaré pendiente de tus publicaciones!

      Victoria

      Eliminar