Tutorial para modificar las plantillas en blogger

En este post voy a explicar cómo modificar las plantillas para que queden más personales. A veces me explico como el culo, así que si no entendéis algo me lo comentáis y lo intento explicar mejor ^^

Bueno, lo primero y personalmente más difícil es buscar una plantilla. A parte de encontrar una que te guste tienes que encontrar una que te acepte blogger, porque a veces (muchas veces en realidad...) te dice algo así como "código HTML incompleto". Aquí y aquí hay plantillas que por lo menos a mí me han servido.

Una vez que tienes la plantilla hay que subirla a blogger (evidentemente xD). Para ello entramos en nuestra cuenta y primero clicamos en diseño y después en Edición HTML. Os recomiendo muy mucho tener un blog de pruebas por si pasa cualquier cosa no cargarte el bueno.

Si no vais a hacer los cambios en un blog de pruebas, antes de cargar la nueva plantilla guardaremos una copia de la actual. Esto también lo haremos de todas formas aunque hagamos los cambios en el blog de pruebas cuando vayamos a cargar la nueva plantilla ya modificada.

Cuando le damos nos sale la típica ventanita que nos pregunta donde guardarlo (como cuando guardas una imagen).

Después de eso procederemos a cargar la plantilla que hemos elegido. Para ello en código HTML le damos a examinar y una vez la tengamos localizada le damos a subir. Es probable que te diga que hay que eliminar varios elementos pero si trabajamos en un blog de pruebas nos da igual (ya os digo, si no lo tenéis haceros un blog chorra para esto que es mucho mejor que practicar en el blog bueno), así que le damos a aceptar y si no ha habido ningún problema ya tenemos cargada la plantilla.

En mi caso he elegido esta plantilla para modificar:

Ya que tenemos cargada la plantilla vamos a empezar cambiando la cabecera. Supongo que este paso todos lo sabéis pero lo explico rápidamente por si acaso.
Para cambiar la cabecera vamos a diseño y allí donde pone cabecera le damos a editar, nos sale un cuadro que nos pregunta desde dónde subir la imagen y dónde queremos situarla. Lo mejor es ponerla en lugar del título y la descripción, pero eso es cuestión de gustos.
Una pequeño consejo que doy es que si subís la cabecera directamente desde el PC cuando la hagáis la guardéis en formato PNG para que no pierda calidad, también decir que depende de la plantilla la cabecera tiene que ser de un ancho u otro, pero eso os lo pone en el mismo cuadro. Una cosa muy importante es que después de cada paso guardéis los cambios, aunque sea una tontería porque en el siguiente paso podemos meter la pata y hay que empezar de nuevo.

A veces nos puede pasar esto, pero que no pasa nada porque ahora vamos a ajustarlo ^^ Para eso, dentro de diseño nos vamos a edición HTML y en el código buscamos donde ponga:

/* Header
-----------------------------------------------*/

#header-wrapper {
width:606px;
height:410px;
margin:0 auto 0px;
}

#header {
margin: 0px;
width:606px;
height:401px;

Primero vamos a cambiar donde pone #header el largo de la cabecera (401), en mi caso de largo mide 250. Al cambiar el largo la tabla de la platilla queda muy separada, así que vamos a acercarlo cambiando el largo de donde pone #header-wrapper (410). Aquí puedes ponerlo como queráis, yo le voy a poner 270. Es recomendable antes de guardar ningún cambio darle a vista previa para ver como vamos.

Una vez hecho esto vamos a cambiar el fondo. El fondo o bien lo dejamos con un color o le podemos poner algún motivo. Para dejarlo tal como está y cambiarle el color buscamos en el código HTML el siguiente:

body {
background:$bgcolor;

Para los cambios de color nos va a hacer falta el Photoshop. Supongamos que queremos poner el fondo en gris, pues en el PS le damos al cuadrado de color y elegimos el gris que queramos, después copiamos el código que sale con la almohadilla delante, en este caso es #c0c0c0.

Después sustituimos en el código el $bgcolor por el #c0c0c0, quedando así:

body {
background:#c0c0c0

En el caso de querer poner algún motivo o pattern, primero lo subimos a imageshack o photobucket, copiamos la URL de la imagen y hacemos el mismo proceso que antes. El código quedaría así en este caso:

body {
background:url(http://img21.imageshack.us/img21/6124/uniqueinc6.jpg);

Aquí nos vuelve a surgir un problema, la separación entre la cabecera y la tabla se quedó verde pero lo solucionamos en un momento. Ahora tenemos que buscar el siguiente código:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 606px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: $bgcolor;
}

Para que ese trozo se ponga acorde con el resto del fondo tenemos que poner el código de nuestro color o la URL del pattern en background-color: $bgcolor, quedando de la siguiente manera en ambos casos:

background-color: #c0c0c0;
o
background-color: url(http://img21.imageshack.us/img21/6124/uniqueinc6.jpg);

Ya tenemos el fondo del blog listo, ahora vamos a cambiar el fondo de la tabla. Las diferentes columnas son independientes, por lo que hay que modificarlas una a una. Primero vamos a cambiar la tabla donde van los post, así que tenemos que localizar este código:

#main-wrapper {
background:$pagetitlecolor;
border: 1px solid $bordercolor;
border-top: 5px solid $bordercolor

Ahora hacemos como con el fondo de la página, sustituimos el $pagetitlecolor por el código de color que queramos, yo lo voy a poner gris oscuro (#a0a0a0). Además, esta plantilla tiene dos bordes, uno alrededor y otro arriba más gordito así que les cambiamos el color por un gris más oscuro todavía quedando así:

#main-wrapper {
background:#a0a0a0;
border: 1px solid #5f5f5f;
border-top: 5px solid #5f5f5f;

Si os fijáis los códigos van mas o menos en orden, así que no hay que liarla mucho buscándolos. Ahora vamos a cambiar el de la columna izquierda, para ello bajamos un poco más el código y nos encontramos con este:

#sidebar-wrapper {
background:$pagetitlecolor;
border: 1px solid $bordercolor;
border-top: 5px solid $bordercolor;

Ahora volvemos a hacer lo mismo que antes y con nuestro código de color tanto de fondo como de borde tiene que quedar así:

#sidebar-wrapper {
background:#a0a0a0;
border: 1px solid #5f5f5f;
border-top: 5px solid #5f5f5f;

Bien, ya nos va quedando menos ^0^ De momento vamos así:

Lo siguiente que vamos a cambiar son las barritas de los títulos, la primera la de los post. Para ello buscamos este código:

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin: 5px;
}

.post {
margin: 5px;
padding-bottom:1.4em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
background: url(http://3.bp.blogspot.com/_0CLPmP1ydOo/SXjVCVAz2vI/AAAAAAAAAMY/BjcappfGiRg/s1600/posttitle.jpg) repeat;
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:bold;
padding-left: 5px;
border-top:1px solid $bordercolor;
border-bottom:3px solid $bordercolor;
}

.post h3 strong, .post h3 a:hover {
background: url(http://1.bp.blogspot.com/_0CLPmP1ydOo/SXjVCdKJauI/AAAAAAAAAMg/OK8XoJX1qLY/s1600/posttitle-hover.jpg) repeat;

Aquí tenemos que cambiar sólo los que están en negrita pero lo pongo entero para que os sea más fácil encontrarlo. En esta plantilla las barritas son imágenes, yo lo voy a poner como color, así que hacemos igual que con los fondos y donde pone background quitamos la URL que nos aparece y le ponemos el código de color. En caso de querer poner una imagen pues sustituimos la URL esa por la nuestra. También tienen borde, así que sustituimos los $bordercolor por nuestro código. Otra opción es quitarle el borde, para ello en el código

border-top:1px solid $bordercolor;
border-bottom:3px solid $bordercolor;

cambiamos el 1 y el 3, que son el grosor del borde, por un 0. Yo le voy a dejar el borde, así que va a quedar así:

post h3 a, .post h3 a:visited, .post h3 strong {
background: #c0c0c0;
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:bold;
padding-left: 5px;
border-top:1px solid #000000;
border-bottom:3px solid #000000;
}

.post h3 strong, .post h3 a:hover {
background: #c0c0c0;

Con las barritas de la columna izquierda hacemos lo mismo en el siguiente código:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.3em;
margin:5px;
}

.sidebar h2 {
margin: .5em 0 1.7em;
padding: 2px 10px;
background: url(http://2.bp.blogspot.com/_0CLPmP1ydOo/SXjVC7zwdYI/AAAAAAAAAMo/IK2vfRAFhTQ/s1600/sidebar.jpg) top left; no repeat; font-size: 85%;
color: $sidebartextcolor;
border-bottom: 3px solid $bordercolor;
border-top: 1px solid $bordercolor;
}

En background sutituimos la url por el código de color para el fondo y en border-bottom y border-top sustituimos lo de $bordercolor, quedándonos así:

background: #c0c0c0;
border-bottom: 3px solid #000000;
border-top: 1px solid #000000;
}

Ya sólo nos queda cambiarle el color a las letras, pasar el contenido de nuestro blog a la nueva plantilla y subirla al blog nuevo n.n

Para cambiarle el color a las letras hay dos maneras: desde diseño darle a la pestaña de fuentes y colores o desde el código HTML. Evidentemente desde la pestañita es más fácil pero como soy muy enrevesada lo suelo hacer desde el HTML, así que os lo explico también. Para ello nos vamos al principio del código, donde pone Variable definitions.

Ya hemos terminado de modificar la plantilla, ahora vamos a pasarla al nuestro blog. Como dije al principio, lo primero y MUY importante es descargarnos una copia del blog tal cual lo tenemos ahora:

Una vez hecho esto, copiamos en un blog de notas nuestra plantilla actual y en otro la plantilla nueva. Esto es para trasladar lo que tenemos a la nueva plantilla ya que si no perderemos nuestros afiliados, codes fan y demás. También si tenéis el programa Frontpage en vez de en blog de notas lo podéis hacer ahí que es más cómodo.
Pues bien, una vez copiados los dos códigos vamos a copiar nuestro contenido en la nueva plantilla. Para ello tenemos que fijarnos en las dos plantillas y casi al final del todo buscar en el código donde ponga <div id='sidebar-wrapper'> A partir de ahí copiamos todo lo que venga debajo en la plantilla actual y lo copiamos en la nueva justo en el mismo sitio, osea, a partir de ahí eliminando lo que tenga en la nueva:

Ya tenemos la nueva plantilla lista para cargarla, así que la seleccionamos entera, eliminamos la que tenemos actualmente, copiamos la nueva, le damos a guardar plantilla, cruzamos los dedos xD y.... ¡listo!

Espero que os sirva, cualquier duda me preguntáis ^^

Si vas a coger el tuto para ponerlo en otro sitio avisa y da crédito plis n.n