¡ATENCION! Aplica este truco en un blog de pruebas para evitar sustos innecesarios. No me hago responsable de lo que pueda ocurrir si lo aplicas directamente sobre la plantilla de tu blog.
La plantilla que vamos a "tunear" será una Mínima en cualquiera de sus versiones originales. Una vez establecida, iremos dando los siguientes pasos:
1. Ir a Diseño : Edición HTML y desmarcar la casilla Expandir artilugios. Buscar esta parte del código:
-------------------------------------------------------------------------------
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breking IE sidebar float */
}
-------------------------------------------------------------------------------
2. Copiarla entera y pegarla inmediatamente después haciendo las modificaciones marcadas en rojo:
-------------------------------------------------------------------------------
#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breking IE sidebar float */
}
-------------------------------------------------------------------------------
De esta forma hemos bautizado a nuestra nueva columna y definido sus principales características -el ancho, de 220 px, y su posición a la izquierda de la pantalla-.
3. Buscar la siguiente sección:
-------------------------------------------------------------------------------
<div id='main-wrapper'>
-------------------------------------------------------------------------------
Inmediatamente antes, pegar esta parte de código:
-------------------------------------------------------------------------------
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>
-------------------------------------------------------------------------------
Llegados a este punto, si haces una Vista Previa del blog, comprobarás que la barra derecha se encuentra por debajo de la zona en donde redactamos nuestras entradas. Esto se debe a que, al incluir nuestra nueva columna, el espacio total habilitado se ha quedado pequeño, por lo que tendremos que ampliarlo. Para ello:
4. Buscar la siguiente parte de código:
-------------------------------------------------------------------------------
/* Outer-Wrapper ----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
-------------------------------------------------------------------------------
Aquí podemos observar lo que antes comentaba: tenemos un espacio de 660 píxeles para el contenido de nuestro blog, pero hemos añadido un tercer elemento con un ancho de 220 píxeles, por lo que tendremos que hacer una suma que refeleje el nuevo tamaño que nos es preciso, es decir: 660 + 220 = 880 píxeles. Luego entonces, tendremos que dejar esta parte de código de la siguiente forma:
-------------------------------------------------------------------------------
/* Outer-Wrapper ----------------------------------------------- */
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
-------------------------------------------------------------------------------
5. 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 rojo:
-------------------------------------------------------------------------------
#header-wrapper {
width:880px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
-------------------------------------------------------------------------------
6. Y lo mismo haremos con la parte correspondiente al pie del blog:
-------------------------------------------------------------------------------
/* Footer----------------------------------------------- */
#footer {
width:880px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
-------------------------------------------------------------------------------
Bueno, pues ya podemos salvar nuestro blog de pruebas, hacer una Vista previa y observar que... ¡horror! ¡el lado izquierdo está vacío! Tranquilos, es normal, esto sucede porque aún no hemos dado contenido a nuestra nueva y flamante columna. Si nos vamos a Diseño : Elementos de la página, veremos algo similar a esto:
Añadamos, entonces, uno o dos artilugios para que comience a tomar vida y veamos el efecto.
7. Pero aún no hemos terminado, porque si hacemos una nueva Vista previa, observaremos que la columna izquierda se queda completamente pegada a la zona donde escribimos nuestras entradas, lo cual no resulta estético.
Para solucionarlo tendremos que buscar la siguiente parte de código y añadir el que está resaltado en rojo:
-------------------------------------------------------------------------------
#main-wrapper {
width: 410px;
float: left;
margin-left: 20px;
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 */
}
-------------------------------------------------------------------------------
8. De esta forma hemos definido un margen de 20 píxeles entre la columna izquierda y la zona donde escribimos nuestras entradas, por lo que tendremos que reajustar nuevamente los valores indicados en los puntos 4, 5 y 6 de 880px a 900px.
Ahora ya sí, puedes guardar la plantilla y empezar a trabajar con ella.
Otra ventaja que tiene este truco es que puedes aplicarlo sobre cualquier otra plantilla de las que te ofrece Blogger por defecto. En algún caso concreto puede variar ligeramente el código, pero la filosofía a aplicar es siempre la misma.
No hay comentarios:
Publicar un comentario
POR FAVOR DEJA TUS COMENTARIOS.AGRADEZCO MUCHO VUESTROS COMENTARIOS E IDEAS. SAHIRA.