Modificar la Plantilla en Blogger

Bueno, os dejo otro post sin imagen.

Algunos de vosotros me habeis pedido que os explique como se hace para modificar la plantilla de Blogger de forma que las imágenes puedan ser mayores.

Aunque a cada uno os lo he mandado bien por mail o comentando en su blog, creo que podría ser de utilidad para más gente. Os transcribo el correo que remití la primera vez que me preguntaron por el tema (y que he ido reenviando a todos los que me lo han preguntado).

Os anticipio que si de fotos no tengo mucha idea, de HTML estoy absolutamente pez, por lo que os ruego, que si vais a intentar cambiar vuestra plantilla, lo primero que debeis hacer es una copia de la misma, por si acaso.

Se trata de dos cosas diferentes:

- Ampliar la plantilla para que quepa una foto mayor.

- Ampliar el tamaño físico de la foto

Empecemos por ampliar la plantilla:

Nos vamos a Edición de HTML y en mi caso tuve que modificar el ancho de:

- header-wrapper (no se que es pero lo cambié). (Le puse 950 pixeles):

#header-wrapper { width:950px; margin:0 auto 10px; border:1px solid $bordercolor; }

- Cabecera (Le puse También 950 pixeles):

#header .description { margin:0 5px 5px; padding:0 20px 15px; max-width:950px; text-transform:uppercase; letter-spacing:.2em; line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor;

- Zona de Comentarios (Le puse 705):

#main-wrapper { width: 705px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

- Zona Lateral Derecha (le puse 240, que sumados a los 705 anteriores es inferior a los 950 que tiene de ancho la página):

#sidebar-wrapper { width: 240px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}

Además cambié el código que te pongo a continuación y que no se que hace exactamente (pero lo puse igual que el ancho de la página):

#outer-wrapper { width: 950px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

Cada vez que cambieis un parámetro dadle a previsualizar y vereiss el efecto que tiene en la plantilla (es un método poco científico pero es el que yo uso). Cuando termines se salva y listo.

Con esto hemos conseguido una zona de Imagen de 707 pixeles y 24o pixeles de zona lateral derecha.

Para poner una imagen mayor os recomiendo que alojeis las fotos en FLICKR y copieis el código de la foto (modificandole el tamaña al que mejor os venga)