Un menú

Vamos a hacer un menú en la cabecera del blog usando las etiquetas utilizadas en las entradas.
Se pidió que en los blogs creados por varias personas se etiquetara cada entrada con el nombre del autor, además de con otras etiquetas. En los blogs hechos por una única persona haremos el menú usando otras etiquetas.
Supongo que la mayoría ha incluido en el blog el gadget 'etiquetas', si no lo habéis hecho, en el pie de cada entrada se puede pulsar sobre la etiqueta deseada para ver todas las entradas que tengan dicha etiqueta:

Copiamos el enlace en el portapapeles (Ctrl+C de la URL)

Vamos a 'Diseño' y en la cabecera añadimos el gadget 'páginas' y lo editamos:

En blogger se pueden tener páginas fijas que no se consideran entradas, por ejemplo, si el blog pertenece a una asociación puede ser interesante tener páginas fijas con información de contacto y con información para hacerse socio. Con este gadget podríamos hacer un menú para acceder a dichas páginas. Nosotros haremos un menú para mostrar las entradas que tengan una determinada etiqueta.

Pasos a seguir:

• pulsamos sobre 'añadir enlace externo', en la casilla de 'título de la página escribimos el nombre del autor o el nombre de la etiqueta, en la casilla de 'dirección web' pegamos la URL que previamente copiamos y pulsamos 'guardar enlace'.
• repetimos para cada una de las etiquetas.
• pulsamos 'guardar'.

CSS. Un fondo para los títulos de las entradas

Vamos a aprender a poner un fondo en los títulos de las entradas del blog. Para ello tenemos que hacer varias cosas: averiguar qué etiqueta HTML usan, <h3>, subir la imagen que previamente hayamos preparado y por último insertar el CSS en el tema utilizado.

Para subir la imagen al blog creamos una entrada y la insertamos.

Vamos a nuestro blog, pulsamos sobre la imagen y después con el botón derecho le damos a 'ver imagen' y copiamos la URL de la misma.

A continuación en Blogger vamos a 'Tema' -> 'Personalizar' ->'Avanzado' -> 'Añadir CSS' y añadimos el siguente código:

  h3 {
     background-image:url("aquí la url de la foto");
  }

Otros ejemplos

En este ejemplo tenemos un fondo que tiene mucho contraste y queremos evitar que el título de la entrada quede encima de las teclas, así que con padding-left añadimos espacio a la izquierda:

  h3 {
     background-image:url("aquí la url de la foto");

     padding-left:100px;
 }

En este otro ejemplo nos hemos quedado cortos. Además de desplazar el texto usando padding, añadimos el color de fondo que coincide con el color de fondo de la imagen e indicamos que no repita el fondo:

  h3 {
     padding-left:100px;
     background-image:url("url de la imagen");
     background-repeat:no-repeat;
     background-color:black;
  }

Tamaño de la imagen:

podemos ir a personalizar tema ->'Ajustar ancho' para ver el ancho de nuestro blog y el ancho que hemos dedicado a los artículos