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
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.
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
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
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 (#).
Конец ознакомительного фрагмента.
Текст предоставлен ООО «ЛитРес».
Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.