4.10.09

223/365 » El sidebar

¿Te gustaría leer este tutorial desde el inicio?

El sidebar está compuesto por widgets, ¿verdad? La mayoría de estos widgets van en el sidebar, así que ahora vamos a aprender a modificarlos. Para esto, me auxilio de alguna herramienta como Firebug o la barra de Web Developer; ambas están disponibles para Firefox. Yo uso la última.

Si decidieron usar la misma que yo, les explico el método que uso para trabajar. Primero, deben añadir los widgets desde el menú de Blogger, en "Elementos de la página". Yo decidí que mi blog tuviera un blogroll, una lista de tags, un widget de Flickr, mi perfil y una lista para el archivo de la página. Ustedes pueden poner los que más les gusten. Ahora, abran su blog, y desde la Web Developer Toolbar seleccionen Información - Mostrar detalles ID y CLASS. Van a ver algo como esto:




Ahora ya sabemos qué significan los # y los puntos, ¿verdad? Recapitulando, los # son los divs con id, y los puntos son los id con clases. Pueden observar que generalmente las clases van adentro de los id, porque son de más baja jerarquía. Por el momento vamos a usar los nombres de los id para cada elemento. Por ejemplo, para modificar los atributos de mi perfil, añado en mi CSS:

NOTA: Para poder modificar el CSS de cualquier widget, dentro de la ventana del código de HTML seleccionen la opción "Expandir plantillas de artilugios". Si no lo hacen, Blogger les va a decir que va a borrar los widgets para grabar el código. Han sido advertidos.

#Profile1 
{
margin-top:20px; 
margin-bottom:20px;
border-top:2px solid #555;
border-bottom:2px solid #555;
padding:10px 0 20px 0;
}

Este código dice: al div con id "Profile1" se le genera un margen superior (este se cuenta como externo al elemento) de 20 pixeles, y también uno inferior de 20 pixeles. Tiene un borde superior e inferior de 2 pixeles, sólido y de color gris (ahora es un buen momento para hablar de los códigos hexadecimales... o no: con una búsqueda en Google de "hex colors", van a encontrar muchas herramientas para escoger los colores que más quieran para su blog). Por último, el padding es el contrario de margin, es un tipo de margen interno. Pueden ver que coloqué cuatro números, lo cual es un modo abreviado para evitar repetir los atributos como sucedió arriba; cada número se cuenta como arriba-derecha-abajo-izquierda. Por tanto, arriba y abajo tienen valores, mientras que derecha e izquierda no.

He decidio también colocar los widgets de etiquetas y del blogroll como columnas para ahorrar espacio, así que he colocado lo siguiente:

#BlogList1 {width:135px; float:left;}
#Label1 {width:135px; float:left;}

El sidebar ahora tiene un ancho de 290px (lo reduje para colocarle un padding de 20px y evitar que el logo del blog esté junto a los títulos de los elementos), por lo que he tenido que reducir el tamaño de ambos elementos. Con 135 pixeles de ancho y un float hacia la izquierda, los dos widgets se colocan uno junto al otro.

Entre otras cosas, una que es importante es que modifiqué el color del texto. Debido a que mi sidebar es negra, necesito letras claras, por lo que uso el siguiente código (lo que ven del sidebar se lo añadí al selector que ya tenía antes:

#sidebar a {color:#ddd;}
#sidebar {width:290px; height:1000px; background-color:#030303; color:white; font-size:9px;float:right; padding-left:20px;}


El selector #sidebar a aplica a los elementos "a", como los hipervínculos. En el sitio de w3c pueden encontrar mucha información sobre todo lo que pueden modificar del CSS de un sitio.

Después de una que otra modificación, y que coloqué un bannercito al blog, voy quedando con una plantilla bastante completa, y solo me falta modificar la parte de los posts. ¿Le gusta cómo vamos hasta el momento?

1 comentario :

Cc¡ dijo...

Hmm no se si me pasa solamente a mi pero la letra del sidebar esta bien pequeña y es un poco difícil de leer