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

5 Ubique en su ordenador una imagen que pese menos de 300 K o, si lo prefiere, descargue de nuestra web la imagen Girasol fondo.jpg y úsela para tal fin. Una vez se halla cargado, pulse el botón Finalizar.

6 La imagen se aplica al fondo. Despliegue el menú que muestra seleccionada la opción Mosaico. Puede escoger si la imagen se debe repetir para llenar el fondo o no, y de qué manera. También si debe desplazarse con la página o no y cómo debe alinearse. Pulse ahora la pestaña Avanzado del Diseñador.

7 Mantenga seleccionada en el segundo panel la categoría Página y escoja alguna fuente para el texto de las entradas.

8 La categoría Header se refiere a la barra de fondo del título, pero como estamos usando una fotografía, no podemos modificarla. La categoría Header Bar modifica la barra de menús del blog y le permite cambiar su color de fondo, la fuente 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 Avanzadodel Diseñador de plantillas,el apartado Date Ribbonpermite 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;}

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 CSSvienen 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.