Personalizando el Blog

Hecho. Cambié de look. Quedó bonito y original creo. Ya iré explicando cómo para los que estén interesados. Lo primero es aclarar algo:

Cuando entran a postear un mensaje en el blog de ustedes, arriba hay 4 opciones. Posting, Settings, Template y View Blog.

Si entran en Template pueden "pick new" (escoger uno nuevo) o "Edit Current" (editar el actual).

Para personalizar los blog hay que "Editar el actual". Pero no es tan sencillo. La apariencia de la mayoría de estos blog está hecha en CSS (Cascade Style Sheet). Si buscan un poco aprenderán cuáles son los atributos de los CSS en cada blog y podrán modificarlo.

Para comenzar, veamos lo siguiente:

body {
background:#333333;
margin:0;
padding:20px 10px;
text-align:center;
font:x-small/1.5em Century Gothic, Trebuchet MS, Verdana;
color:#ccc;
font-size/* */:/**/small;
font-size: /**/small;
}

Ese código aparece (o algo parecido) al principio del template (bajando un par de líneas). Si editan el Background (la primera opción) pueden ir cambiando el color de fondo de la pantalla. Incluso le pueden agregar una imagen de fondo del siguiente modo:

body {
background:#333333 url("http://www.imagenes.com/tu_imagen.gif") no-repeat left top;
margin:0;
padding:20px 10px;
text-align:center;
font:x-small/1.5em Century Gothic, Trebuchet MS, Verdana;
color:#ccc;
font-size/* */:/**/small;
font-size: /**/small;
}


Ese código permite agregar una imagen de fondo.

no-repeat left top

Ese código ordena que la imagen no se repita y que se ubique a la izquierda, en la parte superior de la pantalla. Otras alternativas son hacer que se repita horizontal o verticalmente.

Ahora, para cambiar el tìtulo o cabecera de su blog deben bajar aún más y buscar algo parecido a lo siguiente:

<*div id="content">
<*!-- Blog Header -->

<*span style="font-weight: bold;"><*div id="header"><*div>

<*h1 id="blog-title">
<*itempage>
<*a href="http://www.blogger.com/post-edit.g?blogID=8408823&postID=112221862617042978">
<*span style="color: rgb(204, 0, 0);"> <*img src="http://www.imagenes.com/tep_header.gif" /> <*/span>
<*itempage>
<*/h1>

<*/div>

Ahí, donde está rojo, en mi caso opté por poner una imagen en vez del título programado del blog que sale usualmente (normalmente aparece <$BlogTitle$>) en vez de eso que está en rojo.

Una vez que uno comienza a agarrar el ritmo puedes cambiar otras imagenes y modificar anchos, espacios y esas cosas.

Para más detalles les recomiendo revisar:

Sintáxis CSS
Curso CSS

Este último vínculo es bastante completo. Para navegarlo hay que hacerlo en la parte superior de la página e ir avanzando a la siguiente lección.