Tendremos en cuenta que partiremos de una Mínima tal cual la proporciona Blogger, sin ninguna modificación anterior.
Vamos a tomar las medidas más adecuadas para su perfecta visualización en distintas resoluciones aunque, por supuesto, cada uno puede aumentar o disminuir las mismas según considere oportuno.
[1] Vamos a la parte de Edición de HTML en nuestra plantilla. No hace falta que expandamos los artilugios.
En primer lugar localizaremos el #outer-wrapper { esto es, por así llamarlo, el "cuerpo" del blog, tendremos que ensancharlo para más tarde cuando hagamos lo mismo con el cuerpo de las entradas y la sidebar, estan tengan suficiente espacio.
Nos fijamos en la primera línea:
#outer-wrapper {
width: 660px;
Cambiaremos esa línea por width: 850px;
[2] Vamos ahora a ensanchar el cuerpo de entradas (main), buscamos un poco más abajo de lo anterior esto: #main-wrapper { y al igual que antes cambiamos la línea del width (ancho) por esta: width: 500px;
31] Un poco más abajo vemos #sidebar-wrapper {, ahí es donde modificaremos el ancho de nuestra sidebar con el mismo sistema que antes, cambiando la línea del width (ancho) por esta otra: width: 250px;
[4] Esta parte no es imprescindible, pero según mi opinión, el blog gana bastante estéticamente si la cabecera (header) y el pie del blog (footer) tienen el mismo ancho que el resto del blog. Para hacer este cambio buscamos (hacia arriba) esta parte: #header-wrapper { y cambiamos la línea del width porwidth:850px; (el mismo ancho que el cuerpo del blog), así la cabecera ocupará el mismo espacio que las entradas y la sidebar juntas.
Bajamos ahora por el código de la plantilla, hasta encontrar el #footer { y le ponemos también el mismo ancho que el blog: width:850px;
[5] Usamos la vista previa, y si todo ha ido según lo previsto, guardamos los cambios.
[Nota]
Si cambiamos las medidas usadas para ensanchar el width (ancho) de las entradas y la sidebar, tendremos en cuenta que la suma de los dos valores no deben nunca sobrepasar la anchura total del blog y, que tendremos que dejar, como en este caso, unos pixeles sobrantes lo que nos asegurará una distancia optima entre los elementos y, por tanto, una correcta visualización del blog.
Vamos a tomar las medidas más adecuadas para su perfecta visualización en distintas resoluciones aunque, por supuesto, cada uno puede aumentar o disminuir las mismas según considere oportuno.
[1] Vamos a la parte de Edición de HTML en nuestra plantilla. No hace falta que expandamos los artilugios.
En primer lugar localizaremos el #outer-wrapper { esto es, por así llamarlo, el "cuerpo" del blog, tendremos que ensancharlo para más tarde cuando hagamos lo mismo con el cuerpo de las entradas y la sidebar, estan tengan suficiente espacio.
Nos fijamos en la primera línea:
#outer-wrapper {
width: 660px;
Cambiaremos esa línea por width: 850px;
[2] Vamos ahora a ensanchar el cuerpo de entradas (main), buscamos un poco más abajo de lo anterior esto: #main-wrapper { y al igual que antes cambiamos la línea del width (ancho) por esta: width: 500px;
31] Un poco más abajo vemos #sidebar-wrapper {, ahí es donde modificaremos el ancho de nuestra sidebar con el mismo sistema que antes, cambiando la línea del width (ancho) por esta otra: width: 250px;
[4] Esta parte no es imprescindible, pero según mi opinión, el blog gana bastante estéticamente si la cabecera (header) y el pie del blog (footer) tienen el mismo ancho que el resto del blog. Para hacer este cambio buscamos (hacia arriba) esta parte: #header-wrapper { y cambiamos la línea del width porwidth:850px; (el mismo ancho que el cuerpo del blog), así la cabecera ocupará el mismo espacio que las entradas y la sidebar juntas.
Bajamos ahora por el código de la plantilla, hasta encontrar el #footer { y le ponemos también el mismo ancho que el blog: width:850px;
[5] Usamos la vista previa, y si todo ha ido según lo previsto, guardamos los cambios.
[Nota]
Si cambiamos las medidas usadas para ensanchar el width (ancho) de las entradas y la sidebar, tendremos en cuenta que la suma de los dos valores no deben nunca sobrepasar la anchura total del blog y, que tendremos que dejar, como en este caso, unos pixeles sobrantes lo que nos asegurará una distancia optima entre los elementos y, por tanto, una correcta visualización del blog.
Fuente: El Escaparate
0 comentarios:
Publicar un comentario