Ver Mensaje Individual
Antiguo 20-03-2008, 20:11:47   #1
MaLKaViaN
Staff Zona Beta
 
Avatar de MaLKaViaN
 
Fecha de Ingreso: Jan 2008
Mensajes: 92
Agradecimientos: 1
Agradecido 2 veces en 2 Posts
Contactar con MaLKaViaN a través de MSN
Predeterminado Agregar una 2da Sidebar a tu blog+ extra(para blogger)

Este tutorial ha sido extraído de [hide]http://ayudaparaelblog.blogspot.com]ayuda para tu blog[/url][/hide] sin modificaciones de ningún tipo por mi parte


Muchos quisieran darle ese toque especial a su blog y esta es una forma.

[hide]"#outer-wrapper - Define el blog entero.
#main-wrapper - Define la columna principal.
#sidebar-wrapper - Define la sidebar.

Para insertar una nueva Sidebar necesitaremos agregar algunos códigos y a su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para las siguientes plantillas de Blogger:
Todas las Minima (Dark, Blue, Ochre, Lefty, Stretch, Lefty Stretch), Denim, Dotsdark

1. En la plantilla tenemos que ubicar lo siguiente:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
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 */
}

#sidebar-wrapper {
width: 220px;
float: right;
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 */
}

2. Tendremos que modificar el width (ancho) del #outer-wrapper, el width (ancho) del #main-wrapper y el width (ancho) de la #sidebar-wrapper, para poder agregar la nueva sidebar. Además hay que agregarle un margen hacia la izquierda (margen-left) para que haya un espacio entre la nueva sidebar y la columna principal.
Ejemplo:

#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}
3. Después de haber modificado el ancho del blog entero, de la columna principal y de la sidebar, agregamos una declaración o código para la nueva sidebar (lo que esta en azul agregas a tu blog) después de:

#sidebar-wrapper {
width: 150px;
float: right;
...
}

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}


4. Ahora necesitamos hacer algunos cambios en el cuerpo de la plantilla. Tendrás que buscar el div con el id content-wrapper y de ahí tienes que agregar algunas líneas de código para que funcione.
Después de:

&ltdiv id="content-wrapper">
&ltdiv id="crosscol-wrapper" style="text-align:center">
&ltbection class="crosscol" id="crosscol" showaddelement="no" />
</div>

Agregar lo siguiente:

<div id='newsidebar-wrapper'>
<bection class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</bection>
</div>

5. Para que veas los cambios haces clic en Vista Previa y si crees que has hecho bien las modificaciones, simplemente clic en Guardar Plantilla."[/hide]

Se me olvidaba, aquí va el extra . Esta es la plantilla minima black modificada, a al cual le fue agregada una segunda sidebar. La puedes descargar desde [hide]http://"http://webjcp.googlepages.co...escolumnas.xml[/hide]
si al pinchar el enlace no comienza la descarga copia el enlace y ábrelo desde tu gestor de descargas favoritos para comenzar la descarga
MaLKaViaN is offline   Responder Con Cita