SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

14 nov. 2014

Personaliza más tu blog con pequeños detalles: Fecha y Etiquetas

Seguimos con esos pequeños detalles que hacen de tu blog algo tan personalizado que cada lector puede palpar tu personalidad en el diseño.

Gracias a la iniciativa de Tutorial a la carta me llegan casi cada día peticiones que intento englobar en un solo post porque si no...llegaríamos a mayo del año que viene y seguiría la cola.
Hoy aprenderemos a personalizar la Fecha de las entradas y las etiquetas de debajo de cada entrada.

Personaliza tanto como quieras la fecha de las entradas, nos vamos al Diseñador de plantillas tan práctico (aunque meta mucho código basurillas) de Blogger.
Una vez allí ya sabéis, bajáis hasta la fila de Avanzado y bajáis hasta Añadir CSS
Ahí pegaréis esto:

.date-header span {
  display: block;

text-color: #ffffff; /* Esto es el color de la letra -LN-*/
background: url(); /* El fondo, si queréis imagen poner la URL dentro del paréntesis, si es un color pues #loquesea*/
width: 123px; /* el ancho, por si ponéis imagen de fondo, para que cuadre */
hight: 32px; /* el alto, por si ponéis imagen de fondo, para que cuadre */
line-height: 32px; /* el centro al centro del texto, dadle el mismo valor que el alto*/
text-align: center; /* el texto centradito, right para derecha y left para izquierda-LN- */
}

Como os pongo qué es y para qué sirve cada cosa, sobran más explicaciones, así podéis toquetear todo y tanto como necesitéis y queráis. Tal como está el código es lo que yo tengo puesto, pero sin el fondito de washi tape.

Ahora vamos a personalizar la línea de Etiquetas de debajo de las entradas de nuestro blog:
En el mismo sitio de diseño, avanzado y añadir CSS pegaremos lo siguiente:
.post-labels {
font-size:11px; /* Esto es el tamaño de la letra-LN-*/
background: url(); /* El fondo, si queréis imagen poner la URL dentro del paréntesis, si es un color pues #loquesea*/
font-family: Arial; /* Esto es el tipo de fuente de la letra -LN-*/
}

En ambos casos, podéis agregar tantas pijadas como queráis, solamente es decirle cada cosa que queréis y ya está.

Espero que os sirva y os guste, Besotes!
Lireth's Notebook

15 comentarios:

  1. Ay, a mi estas pijadinas me chiflan!!

    ResponderEliminar
  2. Muchas gracias!!!! Me parece muy útil. Lo pondré en práctica seguro :P

    ResponderEliminar
  3. Me parecen detallitos muy interesantes. Gracias

    ResponderEliminar
  4. Son chorraducas, pero está bien saberlo, muchas gracias por el tutorial~~
    ¡Un besín!

    ResponderEliminar
  5. Gracias Lireth, a ver si me pongo con lo de las etiquetas. :D

    ResponderEliminar
  6. Que chulo,a ver si algún día me pongo a ello, muchas gracias :*

    ResponderEliminar
  7. Gracias, a ver si me pongo. Feliz "findde". Petons.

    ResponderEliminar
  8. Qué chulo, a ver si lo pongo en práctica! Una pregunta de novata: y si no queremos ni imagen ni color de fondo, no se pone la línea de "Background" o se escribe sin nada a continuación? o da lo mismo?
    Gracias!

    ResponderEliminar
    Respuestas
    1. Las dos maneras que dices sirven pero yo pondría
      Background: transparent;

      Eliminar
  9. Que guay! A ver si tengo un ratillo para trastear! :)

    ResponderEliminar
  10. Muchas gracias lireth aprendo un montón contigo ^_^
    Un besote

    ResponderEliminar
  11. Gracias LIreth..eres un solete

    ResponderEliminar
  12. Muchas gracias, Lireth. Tengo que probar.

    ResponderEliminar
  13. Cómo se llama tu tipo de fuente? gracias ^^

    ResponderEliminar