Como modificar esta plantilla para que tenga este aspecto

¿Tu plantilla es alguna de las mínimas?
¿Que cambios puedes apreciar en esta plantilla de aquí, respecto a la original?
Te cuento: (de arriba a abajo).
---

1. Tiene una imagen en la cabecera.
2. Esta imagen encaja perfectamente en el recuadro original.
3. La línea exterior de este recuadro es mas gruesa y del mismo color que el título del blog (originalmente sería del mismo color que la línea que separa las entradas).
4. La interior no solo es más gruesa, además es discontinua y del color del subtítulo del blog.
5. El título y el subtítulo están situados a la derecha, (no en el centro) y centrados verticalmente (y no arriba del todo).
6. El fondo del blog tiene una imagen.
7. El fondo de la zona donde escribes, sin embargo, no.
8. El conjunto blog/sidebar, tiene el mismo ancho que la cabecera.
9. La línea que separa las entradas es más gruesa, al igual que la que separa los elementos de la sidebar

---

Vamos a ver como cambiar cada uno de estos puntos en la plantilla.

(Código de colores: negro lo que va a seguir igual, rojo lo que hay pero vas a cambiar, azul el cambio realizado y verde lo que puedes poner a tu gusto).

---

1. La imagen de la cabecera la he sacado de aquí. Tienen un montón de banners con unas medidas que quedan bien como cabecera de un blog. (Raro será que no encuentres una que se adapte al tema del tuyo).
2. Para que encaje en el recuadro, una vez la hayas colocado a través de Editar del elemento Cabecera en Plantilla/Elementos de la página has de modificar las medidas de éste, no de la imagen. Pincha en Edición de HTML y busca la zona encabezada por /*Header. Debajo verás #header-wraper. Sustituye en esta línea width:660px; la cantidad de px por ésta 817
3. En el mismo sector, dos líneas mas abajo: border:1px solid; cambia el 1 por el número que prefieras y bordercolor por pagetitlecolor.
4. Dos bloques más abajo, encabezado por #header, pone border: 1px solid $bordercolor; para que se vea como aquí ha de poner border: 3px dashed $descriptioncolor;
5. Algo más abajo, sector encabezado por #header h1, verás esta línea padding:15px 20px .25em; cambia la primera cifra (15) por 75 para centrar el título verticalmente y añade esta línea text-align:right; encima de letter-spacing, para alinear el título a la derecha.
6. Si tu blog tiene subtítulo, un poco más abajo verás #header .description añade también esta línea: text-align:right; para alinear el subtítulo a la derecha.
   
7. Para añadir una imagen al fondo del blog, borra esto background:$bgcolor; y pega esto en su lugar background:url("aquí la dirección de la imagen que vayas a poner") repeat fixed; justo debajo de body { al principio de todo del código de tu plantilla, después de los variables.
8. En la zona encabezada por /* Posts, en el sector titulado .post, añade, encima de margin, esta línea: background:$bgcolor;
9. En la zona encabezada por /* Outer-Wrapper, modifica el ancho (width) de #outer-wrapper, 660 originalmente, por 815, el de main-wrapper, 410, por 600 y el 220 de sidebar-wrapper por un 200. (Puedes modificar estas cantidades a tu antojo y hacer más o menos ancha cada sección, tan solo has de tener en cuenta que la suma de ambas sea igual a 800. Los 17 píxeles restantes hasta alcanzar los 817 de la cabecera, los dejaremos para la separación de zonas).
10. En la zona .post { donde antes has colocado lo del color de fondo, cambias el grosor de la línea modificando la cantidad de px (píxels) de border-bottom. También puedes modificar su aspecto sustituyendo dotted por dashed o solid. La línea que separa los elementos de la sidebar la modificas más abajo, en este sector .sidebar .widget, .main .widget, donde también encontrarás el border-bottom.

---

Variantes de lo anterior:

1. Si quieres poner una imagen personal las medidas del apartado 2. puede que sean distintas, dependiendo del ancho de tu imagen. La altura se adaptará a la imagen que pongas automáticamente.
2. Para hacer esta modificación y adaptar el ancho a tu imagen, antes de empezar a modificar la cifra pincha en vista previa y ves añadiendo píxels y haciendo vista previa, hasta que veas que el recuadro encaja perfectamente. (Fíjate que la cifra que coincide con el banner, 817, no es redonda)
3. Puedes poner como color de las líneas el que tu quieras. Yo he elegido para la muestra el del título y el subtítulo del blog, pero puedes cambiarlo por la variable que desees, o inventar una variable nueva, (en Tuneando el blog te explico como añadir variables al código), mientras respetes los parámetros y los signos que conforman una variable. Puedes llamarla, por ejemplo Border Header color borderheadercolor, para que sepas a qué corresponde cuando aparezca la nueva variable en la lista de Fuentes y colores.
4. La explicación anterior es válida para este apartado.
5. Si tu banner de cabecera tiene la imagen a la derecha, en lugar de text-align:right; escribe text-align:left; y el título se colocará a la izquierda del banner.
6. Lo mismo que en el punto 5.
   
7. Si prefieres que el fondo sea de color liso, déjalo tal y como está, y si quieres poner una imagen transparente, como las que tengo en la scribe y en la rounders de ejemplo, pon esto url("aquí la dirección de la imagen que vayas a poner") repeat fixed entre los dos puntos (:) y el símbolo del dólar ($).
8. Si quieres poner una imagen de fondo a tus entradas, distinta a la que haya en el fondo del blog, añade esta línea background:url("aquí la dirección de la imagen que vayas a poner") repeat fixed; en vez de la que digo en el bloque anterior. (Ver nota al final)
9. Si el ancho final de la cabecera resulta ser distinto al aquí indicado, tendrás que modificar estas cantidades en base a ella, o el blog se verá descompensado. Si la suma del ancho de main-wrapper y de sidebar-wrapper es superior a la de outer-wrapper, la sidebar aparecerá debajo de las entradas. Respeta las proporciones y deja un margen de 10 px para la separación de zonas.
10. Si quieres que la línea de separación tenga un color propio, créale una variable e inventa su nombre, por ejemplo Separador color/separadorcolor y coloca esta última definición en lugar del bordercolor.

---

Nota:

En las líneas de código que contienen direcciones de imágenes he puesto repeat y fixed.

Repeat hace que una imagen pequeña se vaya repitiendo a lo ancho y alto del blog, fixed hace que al mover la página con el ratón o usando la barra lateral del scroll, el fondo no se mueva.

Al ensanchar la parte aprovechable de tu plantilla, en Elementos de la página verás que los recuadros también se han ensanchado y se salen de madre. No se si tiene arreglo, si lo tiene ya dejaré las instucciones.

---

Otros cambios que puedes realizar, añadir iconos, variables, etc, encontrarás las explicaciones en el blog principal.

---

Consejos:

Haz los cambios que desees uno a uno, haz Vista previa cada vez que modifiques algo y Guarda plantilla si el cambio te satisface y la página carga bien. Así te evitarás tener que repetir los cambios que no hayas guardado si en algún momento has de pinchar en Borrar cambios, pues elimina todos los que no hayan sido guardados.

--- ¡Suerte!---

Para cualquier duda o consulta, puedes dejarme un comentario o contactarme via e-mail.

---

¡ATENCIÓN!

Cuando hice esta entrada, todos los blogs de blogger utilizaban las expresiónes right y left para indicar la derecha y la izquierda.

Pero hace tiempo añadieron dos variables a los códigos de las plantillas, con lo que si tu blog es posterior a la fecha de creación de este, en lugar de right has de poner (o verás) $endSide y en lugar de left $startSide.

Para saber si tu blog está construido en un modo u otro, mira al final de las variables si hay las dos que indican la modificación.