Aprender a crear su primera página web con 100 ejercicios prácticos. MEDIAactive

y el color de los textos. Cambie lo que le parezca conveniente.

      9 En el apartado Enlaces puede establecer que el color de los vínculos cambie al colocar el cursor encima y después de que han sido visitados por el usuario. Active esta ficha y modifique los colores establecidos.

      10 Puede cambiar el color y la tipografía del título. Escoja esta opción y haga una elección que contraste contra el fondo.

      11 Despliegue la ficha Título de entrada, realice los cambios que prefiera y al terminar, pulse los botones Aplicar al blog y ver blog.Si pulsa sobre la muestra de color de alguno de los selectores, se despliega un panel en el que puede crear su propio color o establecer transparencias.

      IMPORTANTE

      En la categoría Avanzado del Diseñador de plantillas, el apartado Date Ribbon permite modificar la cinta que indica la fecha de cada entrada. Si desea eliminarlas de todo el blog, utilice el siguiente código en el apartado Añadir CSS: .ribbon {display:none !important;}

019	Modificar código CSS de plantilla dinámica

      BLOGGER TAMBIÉN PERMITE REALIZAR personalizaciones sobre las plantillas dinámicas utilizando código CSS, desde el Diseñador de plantillas de Blogger. En este ejercicio usaremos esta prestación para crear una cabecera personalizada para nuestro blog.

      IMPORTANTE

      Las siglas CSS vienen del inglés Cascading Style Sheets (Hojas de estilo en cascada) e identifican un lenguaje utilizado para definir el estilo de un documento, independientemente de su estructura.

      1 Para este ejercicio puede descargar de nuestra web el archivo cabecera.jpg o crear su propia cabecera. Nuestra imagen mide 110 por 182 píxeles y tiene una resolución de 72.

      2 En el Editor de plantillas, dentro de la categoría Fondo, pulse el vínculo Eliminar imagen, del apartado Imagen de fondo. Una vez ha insertado una imagen como fondo, puede eliminarla en cualquier momento.El valor !important hace que el estilo sobrescriba a la plantilla.La imagen cargada se encuentra en la carpeta Álbumes del apartado Fotos.

      3 En la categoría Avanzado, escoja la opción Añadir CSS.

      4 En este panel puede añadir códigos personalizados. Lo que haremos será añadir un código para insertar una cabecera personalizada. Escriba el siguiente código, o descárguelo y cópielo del archivo Código cabecera que encontrará en nuestra web:.header-bar {background-color:#536fa8 !important; /* Color fondo */background-image:url(URL IMAGEN DE CABECERA) !important;background-repeat:no-repeat;height:148px !important; /* Altura de cabecera */border-bottom:20px solid #f07300; /* Cinta inferior */}#header .header-bar .title h1, #header .header-bar .title h3 {display:none;}#header a:hover {text-decoration:none !important;}#main {margin-top:125px !important;} /* Distancia entre la cabecera y el contenido */

      5 En una nueva ventana, acceda a su perfil Google, pulse en la pestaña Fotos y luego haga clic el botón Upload new photos.

      6 Cargue la imagen de la cabecera con el método que prefiera y pulse el botón Create álbum.

      7 Una vez cargada, pulse el botón Cancel del cuadro Share.

      8 En la barra lateral escoja la opción Photos y en la cabecera de esta pantalla pulse la opción Albums, acceda a la foto, pulse con el botón secundario del ratón sobre ella y escoja la opción Copiar ruta de la imagen. Una vez aloja una fotografía en un álbum, dispone de una URL que puede usar para otros fines.Hemos usado como color de fondo de la cabecera el azul del cielo de la imagen (#536fa8).

      9 Regrese al Diseñador de plantillas y, en el código creado, sustituya el texto URL IMAGEN CABECERA por la ruta de la imagen que ha cargado para tal fin.

      10 Al terminar, ya debe ver el cambio en la parte la pantalla de previsualización. Pulse el botón Aplicar al blog y luego el vínculo Ver blog, para comprobar el resultado.

      IMPORTANTE

      El código que presentamos en este ejercicio permite modificar las medidas de la altura de cabecera, cinta inferior y distancia entre la cabecera y el contenido, indicadas en píxeles, así como los colores de fondo y de la cinta inferior, cuyos códigos vienen precedidos por un signo numeral (#).