sábado, 21 de julio de 2007

Plantilla con 2 sidebars

1. Priemro vamos a plantilla y escojemos una de las que digan "Minima,minima dark minima blue etc." ya que estas son las mas faciles de alterar.


2. Luego vamos a plantilla---> Edicion html

Buscamos el sig. texto:

#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}


3. Y todo eso lo cambiamos por el sig codigo:


#outer-wrapper {
margin:0;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
margin-left: 1%;
width: 55%;
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 */
}

html > body #main-wrapper {
margin-left: 1%;
}

#sidebar-wrapper {
margin-right: 1%;
width: 20%;
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 */
}
#newsidebar-wrapper {
width: 20%;
float: right;
}
html > body #sidebar-wrapper {
margin-right: 1%;
}


NOTA: Si quieres que las dos sidebar esten a la derecha, no hagas ningun cambio, pero si quieres una de cada lado cambia donde dice "right" (en Rojo) por "left".

4. Despues buscamos el siguiente codigo:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div>

5. Y antes del codigo añadimos:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>


Eso es todo solo guarda y listo. Veras que en plantilla tienes dos sidebar.


Si todo sale bien tu plantilla debera verse asi:

Espero y no tengan problemas con esto en caso de que tenga problemas me lo hacen saber.
Si tienes problemas con esto descargate la plantilla esta contiene 3 sidebars.
Para descargarla solo da click aqui.

10 Comentarios:

Anónimo dijo...

hola
que buen truco me gusto mucho y me sirvio de uff!!muchisimo espero y publiques mas cosas asi gracias bye

Science Magic dijo...

Gracias Amigo, tu truco es genial, desde hace rato necesitaba esas dos widgets. Quiero que me des el permiso de ponerte en mis Blogs amigos.

Espero me visites a mi club

http://elclubdedanny.blogspot.com

Angel Navarro dijo...

buen post, esta buena la odea de poner 2 sidebars haber si lo hago proximamente en mi bog

Kikyou~♥ dijo...

No sabes como he buscado este truco y nunca me funcionaba por mas tutoriales q buscara, mil graciaas!!!

SuperBlade18 dijo...

Ya lo hice es IMPOSIBLE !!

lo he hecho mil veces

necesito me ayudas

mi blog es: http://superblade18.blogspot.com

gracias

Hack Diseño® dijo...

Hola SuperBlade, si no funcion el hack porque en la plantilla de blogger ya nos e aceptan 2 Profile1 asi que ahora tienes que poner el siguiente codigo para que funcione recuerda este codigo lo vas a insertar como te lo dice el paso 4 asi que este seria el nuevo paso 5:

Codigo:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Espero haber resuelto tu problema...y gracias por visitar nuestro blog.

Atte:Hacko

Nico Iriarte dijo...

me sale esto cuando termino: El código ID del nuevo widget "Profile" no es válido para este tipo: Profile

Hack Diseño® dijo...

Hola nikets lo que pasa esque blogger ya no acepta ese tipo de widget el "profile" porque le pusieron otro nombre a ese tipo de widget y no habia actualizado la informacion pero este seria el nuevo codigo para la sidebar:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Por si te fijas solo le quite esta linea:
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
Es todo y gracias por tu visita.

Anónimo dijo...

Te felicito una y mil veces.
He buscado esta opción en cientos de blogs y siempre me han fallado.
ESTE FUE EL ÚNICO.
MILES DE GRACIAS!

Jose Borges dijo...

hola, gracias... de verdad me estaba matando el codigo y uds señores me han ayudado a resolver... muy buen aporte.

Publicar un comentario

¡Hola!
Gracias por visitar mi blog.
Espero y no sea tu ultima visita.
Deja un comentario, sugerencia, observacion o lo que quieras.

P.D.:Ya no se pueden realizar comentarios anonimos desde que aqui por razones de seguridad, pero puedes utilizar get-box para dejar un comentario con tu nombre y tu mail o url o tambien puedes dar clic en el boton Contacto.