Cómo cambiar el ancho de las columnas en blogger

AVISO: no tengo ni pajolera idea de informática, y muchísima menos de programación... Quiero decir con esto que si sé modificar ciertos parámetros de mi blog es porque, o bien me he pasado horas probando combinaciones en la edición de HTML, o por otra parte me he tirado muchos ratos muertos en internet buscando páginas en las que se describa lo que necesito. Con este tutorial sólo quiero ahorrarle ese paso a los que se vean en las mismas situaciones a las que tuve que efrentarme yo tiempo atrás.

Los que siguen este blog saben que no hace mucho cambié el diseño del mismo. Una de las cosas que me llevó a hacerlo fue mi intención de postear un texto acompañado de un video de youtube, pero como últimamente están en formato panorámico, al incrustarlo me dí cuenta de que se comía literalmente a la columna derecha (en aquellos tiempos en los que este sitio solo tenía una columna)...

Ejemplo de video "comiéndose" a la columna derecha.

Así que investigué y le hice el segundo lavado de cara a este remanso de paz espiritual. Para ello recopilé información la mar de útil que me gustaría compartir con quien lo desee, por lo que me dispongo a enumerar los pasos que se han de seguir para ensanchecer el espacio en donde se escriben los artículos (espacio al que llamaré "columna central" a partir de ahora), ya que blogger nos da en la plantilla minima una miseria de 410 píxeles (px) de ancho.

1.- En primer lugar aclarar que los distintos elementos de un blog poseen cada uno un ancho determinado. De este modo, la columna central mide 410 px de ancho - como venía diciendo antes - mientras que la columna de los widgets posee 220 px (donde se pone el perfil, el archivo del blog, las etiquetas, los enlaces y todas las polladas esas; situada a la derecha de la pantalla en las plantillas tipo minima), ambas separadas por un espacio de 20 px. Si sumamos todos estos píxeles obtendremos como resultado el ancho total del blog: 410 + 220 + 20 = 650.

Luego, cuando nos pongamos con la edición de HTML veremos que el ancho supuestamente es 660. Yo he supuesto que esos 10 px sobrantes son para que no se quede tan "ajustado"... Y esa suposición de momento no me ha fallado, así que siempre añadiremos de 10 a 30 píxeles al ancho total del blog "para que no se nos quede tan ajustado", porque somos así de guays :)

2.- Vamos al lío, pero despacico, pa que nadie se pierda: meteos en vuestra cuenta y pulsad el botón "diseño" y luego en "edición de HTML". A continuación desmarcad la casilla "Expandir artilugios" (no sé para qué sirve, pero nunca viene mal) y bajaros la plantilla actual, para poder volver a subirla en caso de que todo se vaya a la mierda. Buscad esta parte del código (para el que piense estar leyendo el código palabra por palabra, que se conecte con mozilla, pulse Ctrl + F, y pegue el codigo siguiente):

#main-wrapper {
width: 410px;
float

Ese "410px" es lo que vamos sustituir por el ancho deseado. Los videos panorámicos de youtube, en su versión incrustable más pequeña, poseen 540 px de ancho. Lo cierto es que se pueden ajustar la altura y la anchura siempre y cuando tales dimensiones sean proporcionales, pero los videos mola verlos grandes ¿no? además, ¿si no qué coño hago yo escribiendo esto? el caso es que si queréis poder pegar videos de 540 de ancho tan solo tenéis que fijar un ancho de columna igual o mayor (preferiblemente un poco más grande (20 ó 30 px), para que no se quede tan ajustado). Para este ejemplo, tomaremos un ancho de 560 (540 del video + 20 para que sobre un poco), por lo que al sustituir quedaría de esta forma:

#main-wrapper {
width: 560px;
float

2.- Ahora solo queda ajustar los sumandos de la operación que hemos hecho antes, en la que teníamos lo siguiente: 410 + 220 + 20 = 650. Con el nuevo ancho tendréis que sustituir el 410 por el ancho que hayáis escogido. Los otros valores, en cambio, se quedan igual, ya que de momento no queremos modificar el ancho del margen ni el de la columna derecha... ¿no? En mi caso quedaría: 560 + 220 + 20 = 800, y tal como dije hace unos párrafos, le ponemos unos cuántos píxeles de sobra, como por ejemplo, 30px. Tendría por tanto un blog con 830 px de ancho total (800 + 30).

Dicha cantidad hay que introducirla en esta parte del código:

/* Outer-Wrapper ----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;

Que se quedaría así:

/* Outer-Wrapper ----------------------------------------------- */
#outer-wrapper {
width: 830px;
margin:0 auto;

3. Ahora tendremos que ajustar el tamaño de la cabecera, por lo que tendremos que buscar la siguiente parte de código y modificar el valor resaltado en verde:

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


6. Y lo mismo haremos con la parte correspondiente al pie del blog:

/* Footer
----------------------------------------------- */
#footer {
width:850px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Ale, ya está. Quien tenga alguna duda que se busque la vida, que como he dicho al principio, no tengo ni papa de informática. Cuanti menos de resolver dudas al respecto. Aún así espero que os haya servido ^^. Dedicado a Azrael, que tenía problemas con este tema (es el de la captura de pantalla).