Títulos de dos colores en el sidebar de Blogger

En la plantilla Mínima de Blogger, por defecto hay un solo encabezado que define tanto la fecha de los posts como los títulos del sidebar, y que es simplemente h2. En otras plantillas, es probable que el título del sidebar aparezca como .sidebar h2 (o #sidebar-wrapper h2), y si no, debiésemos definirlo como tal, para que tenga propiedades distintas e independientes de la fecha de los posts.

Por ejemplo:

.sidebar h2 {
color: #ff0080;
font-size: 16px;
font-weight: bold;
text-transform: none;
letter-spacing:0;
}
En este caso, quiero que no haya espacio entre caracteres (letter-spacing), que las letras no se muestren todas como mayúsculas (text-transform: none), y definí las propiedades que quiero para la letra: color fucia, tamaño, letra en negrita y quizás también una fuente distinta. Con ello, el título se mostrará de un solo color. Pero como lo que yo quiero es que los títulos se muestren en dos colores distintos (como en este demo), tengo que hacer lo siguiente:

1. Ir a la edición de HTML y expandir los artilugios.

2. Antes de ]]>< /b:skin >, definir el segundo color que quiero para el título de mi sidebar, de la siguiente manera:

.azul {
color:#0F6084;
padding-left:5px; /* espacio entre la 1° y la 2° parte del título */
} 

3. Bajo div id=’sidebar-wrapper’ están localizados los widgets. Por ejemplo, si quiero modificar el widget que lleva por título “Archivo del blog”, debo buscar un código como el siguiente en mi plantilla:
Aquí cambio el título (title), desde “Archivo del blog” a sólo “Archivo“, para que no se muestren las tres palabras del mismo color. Luego, antes de < /h2> añado < span class=’azul’ >del blog < /span > para determinar la segunda parte de mi título, de la siguiente manera:
Esto nos permite mostrar también la primera letra del título distinta (color, fuente, tamaño), o el título con tres colores, para que se vea como en degradado.
*Lo vi en Template-Godown y la plantilla WP-Polaroid.

0 comentarios:

Publicar un comentario en la entrada