Cómo modificar una plantilla de Blogger

El siguiente tutorial es útil cuando deseamos cambiar el ancho de la plantilla que estamos utilizando de Blogger.

En el primer ejemplo, estamos utilizando la plantilla de la familia MINIMA, y deseamos ampliar el ancho del sidebar.

Como paso previo, es recomendable guardar una copia de seguridad de la barra lateral de tu blog. Para ello, abres el blog en tu navegador habitual, vas a “Archivo/GuardarComo”, y confirmas que deseas guardar una copia en tu escritorio, con “formato html” o como “Página web completa”. Al confirmar esta operación, se guardará una carpeta en tu ordenador con todos los elementos del sidebar, y de los elementos del blog visibles en la actualidad (no han quedado guardados los archivos historicos, pero no es necesario para esta operación).

Además, también es conveniente realizar una captura de pantalla (imagen) del blog. Comprueba si en tu navegadorexiste la opción “Archivo/Guardar como Imagen” o bien “Archivo/Save Page as Image”. Si existe la opción, utilízala para guardar una imagen de tu página web. Te ayudará como guía para restablecer la página completa, si es necesario.

Si no tienes la opción “Guardar como Imagen” en tu navegador, puedes obtener una entrando en http://www.browsrcamp.com/ y escribiendo la direccion de tu blog o, mejor todavia, de una entrada de tu blog no demasiado larga. Por ejemplo:

http://elblogmaschic.blogspot.com/2008/08/brighton.html

En un par de minutos, Browsrcamp te dara una imagen de tu blog. Guárdala también en tu escritorio. Con todo ello podrás restablecer la barra lateral de tu blog sin problemas, si en algún momento la pierdes accidentalmente (aunque es muy improbable que esto ocurra).

Y ahora, finalmente, pasamos a ampliar la plantilla.

Para ello, debes proceder de esta manera:

1
Entras en Diseño/Edición de Html

2
Clicas en “Descargar plantilla completa”, para tener una copia de seguridad.

3

Confirmas en “Aceptar” para guardar la plantilla en tu ordenador.

4
Vuelves a la plantilla abierta que tienes en el navegador.

5
Buscas en la plantilla los elementos que deseas modificar, y haces el cambio de ancho en cada caso. En este ejemplo vamos a hacer más ancha la barra lateral o sidebar (de 220 a 300 pixels) y, lógicamente, también haremos más anchos los elementos que contienen el sidebar.

6
A continuación te he relacionado los elementos que debes buscar y los cambios que debes efectuar en cada caso.

7
BUSCO
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
ESCRIBO 740 EN LUGAR DE 660
Y ME QUEDA
#header-wrapper {
width:740px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

8
BUSCO
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
ESCRIBO 740 EN LUGAR DE 660
Y ME QUEDA
width: 740px

9
BUSCO
#main-wrapper {
width: 410px;
float: $startSide;
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 */
}
Y LO DEJO IGUAL

10
BUSCO
#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}
ESCRIBO 300 EN LUGAR DE 220
Y ME QUEDA
width: 300px;

11
BUSCO
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
ESCRIBO 740 EN LUGAR DE 660
Y ME QUEDA
width: 740px

12
Ya casi hemos terminado: clicas en Vista Previa, y compruebas que el nuevo ancho está correcto.
Si algo no cuadra restablece la plantilla antigua clicando en “restablecer” en el editor de plantillas, revisa los pasos que has realizado (probablemente te has equivocado con alguna medida) y empieza de nuevo con los cambios.

IMPORTANTE
Ten en cuenta que en los cambios de código completos, o cuando deseas modificar el ancho de plantillas de “ancho variable” o flotantes, se puede perder la informacion del sidebar. Si, debido a los cambios que quieres introducir, se van a perder los elementos del sidebar, te aparecerá un mensaje de alerta “Están a punto de suprimirse los artilugios” (ver imagen adjunta). Si realmente quieres hacer los cambios, confirma, y recuerda que para restablecer los elementos del sidebar, después del cambio, necesitarás utilizar la carpeta que habías guardado al principio en tu escritorio.

Y este otro ejemplo, es para la plantilla MINIMA STRETCH:

Se han optimizado las medidas para que la pagina tenga una visibilidad perfecta en una pantalla de 1024×768 que es en la actualidad el formato mas frecuente.

RELACION DE CAMBIOS

CAMBIO 1
#header-wrapper {
margin:0 2% 10px;

Debes cambiar la linea del margin, y debe quedar asi:
margin:0 1% 10px;

CAMBIO 2
#main-wrapper {
margin-$startSide: 2%;
width: 67%;

Debes cambiar el margin, y debe quedar asi:
#main-wrapper {
margin-$startSide: .5%;
width: 67%;

CAMBIO 3
#sidebar-wrapper {
margin-$endSide: 2%;
width: 25%;

Debes cambiar el margin y el width, y debe quedar asi:
#sidebar-wrapper {
margin-$endSide: .5%;
width: 30%;

Después de efectuar los cambios, puedes insertar una cabecera de 955px de ancho, que es la que se adapta exactamente a la nueva plantilla creada, que es la adecuada para ser visionada en pantallas de 1024px.