Cómo hacer más anchas las entradas de un blog

Cuando uno abre un blog por primera vez y elige para ello una de las plantillas que nos ofrece Blogger, nos dabamos cuenta que la anchura para escribir nuestras entradas (post) son muy delgadas, esto a veces no es muy conveniente y no se ve muy bien sobre todo si vamos a utilizar imágenes y videos explicativos. En esos casos es mejor hacer más anchas las entradas del blog. En la comunidad de cincolinks he visto muchos blogs que todavía estan con sus entradas muy angostas, por lo que voy a dejar aquí unos apuntes de cómo hacerlas más anchas.

Antes de comenzar quisiera mostrarles las capas (wrappers) que hay en la mayoría de los diseños de las plantillas. Observen la sgte. figura:

La capa más externa se llama outer-wrapper y engloba a las demás capas: la de la cabecera del blog (header) y la del contenido (content); ésta a su vez se abarca la capa principal (main) y la del lateral (sidebar).

He elegido para este ejemplo la plantilla Mínima. Como siempre antes de modificar el código de una plantilla, es conveniente guardar la misma haciendo click en el enlace Descargar plantilla completa. Para modificar la plantilla hay que ir a la sección Diseño -> Edición de HTML, y ahí tenemos el código fuente. En el código tenemos que buscar siguiente parte, que es la capa externa que envuelve todo el contenido del blog:

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Hay que dejar como está cualquier código que se encuentre en esta capa, exceptuando la anchura (width) que es lo que nos interesa modificar y lo que he puesto en negrita, que habrá que borrarlos y poner nuestras medidas. Por ejemplo si ponemos la anchura (width) en 1000 pixeles la capa quedaría de la sgte. manera:

#outer-wrapper {

width: 1000 px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Con esto tendríamos cambiado todo el ancho del blog (outer-wrapper), ahora recién podríamos cambiar la anchura del cuerpo de las entradas o posts (main-wrapper). Para ello ahora tendríamos que ubicar la sgte. sección de código que es la capa:

#main-wrapper {

width: 410px;

float: $startSide;

word-wrap: break-word;

overflow: hidden;

}

De esta capa tendríamos que cambiar el ancho (width) que he puesto en negrita y ponerle las medidas que veamos convenientes. Por ejemplo si ponemos un ancho (width) de 700px la capa quedaría así:

#main-wrapper {

width: 700px;

float: $startSide;

word-wrap: break-word;

overflow: hidden;

}

Pero para que la cabecera del blog no quede dispareja con el ancho del blog, sería más estético que ajustemos su tamaño cambiándole el ancho también a ésta. Para ello tendríamos que ubicar el código de la capa que se ocupa de esto que es header-wrapper:

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Cambiamos el ancho (width), que he puesto en negrita, por un tamaño conveniente que se ajuste al blog, en nuestro caso sería 1000px para que la cabecera se ajuste exactamente al mismo tamaño del blog que modificamos en outer-wrapper. Entonces la capa header-wrapper quedaría de la sgte. forma:

#header-wrapper {

width:1000px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Notaremos también como queda un mayor espacio entre los posts y la sidebar, para evitar ésto podemos aprovechar para hacer crecer en anchura a la sidebar; para ello ubicamos la sgte. sección de código:

#sidebar-wrapper {

width: 270px;

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 */

}

Y cambiamos el ancho (width), por el que veamos conveniente por ejemplo 270 px.

Y eso sería todo, con todos estos pasos ya tendríamos un blog con sus entradas más anchas y podríamos sacarle más provecho al blog. No obstante me gustaría resaltar que tampoco hay que exagerar en el tamaño del blog, es decir así como un blog muy angosto no se vé muy bien y no favorece mucho a la lectura, tampoco lo hace uno muy ancho. Unas medidas recomendables serían entre 900 y 1000 pixeles, aunque la última palabra la tiene cada blogger de acuerdo a sus necesidades.

Salud2!!!