Читать книгу Aprender a crear su primera página web con 100 ejercicios prácticos - MEDIAactive - Страница 25
Оглавление| 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 (#).
