Si quieres saber como agregar una sidebar a tu plantilla mínima de blogger, pues esta entrada es la indicada.
La sidebar es la que se encuentra al lado de las entradas, es donde tu pones elementos, como las etiquetas, tu perfil y algunas otras cosas para adornar tu blog.
Para agregar una nueva sigue los siguientes pasos, y si quieres un ejemplo, ve esta plantilla que yo modifique y le agregue una nueva sidebar.
Empezamos entonces...
Debes modificar algunas partes de tu plantilla html para que esta no se deforme al hacer los cambios.
Para ello haz lo siguiente:
Busca el siguiente código en tu plantilla edición html :
----------------------------------------------- */
#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 */
}
Ahora hay que modificar el ancho (width) del #outer-wrapper, el ancho (width) del #main-wrapper y el ancho (width) de la #sidebar-wrapper, para poder agregar la nueva sidebar. Aparte de esto hay que agregarle un margen hacia la izquierda (margen-left) para que haya un espacio entre la nueva sidebar y la columna principal.
#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}
Ahora tendremos que recién agregar la nueva sidebar, pegando el siguiente código justo despues de
#sidebar-wrapper {
width: 150px;
float: right;
...
}
Código:
#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
Una vez ya pegado el código, debes buscar el siguiente código
<div id="content-wrapper">
<div id="crosscol-wrapper" style="text-align:center">
<:section class="crosscol" id="crosscol" showaddelement="no"/>
</div>
Y pegar el siguiente justo despues:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
Este código hará que puedas agregar elementos a la sidebar, si no pegas este código no te funcionará.
Lo ultimo es ver si te resulto, apretando el botón de vista previa.
Te daré un dato, por si quieres cambiar la sidebar de lugar(derecha o izquierda).
Para cambiar de posición la sidebar nueva o la que ya tenias debes cambiar el float.
Para poner la sidebar en la derecha cambia por float: right; y en la izquierda por float: left;
Y recuerda, este truco funciona en todas las plantillas Minima (Dark, Blue, Ochre, Lefty, Stretch, Lefty Stretch), Denim y Dotsdark
Espero que te halla sido útil esta info. Si tienes alguna duda déjame un comentario.
Adios!

Bienvenidos






















3 comentarios:
Hola.
Mi outer-wrapper dice 740px y el main-wrapl, 485px. ¿se puede agregar sidebar? Me da rabia ver tanto espacio desaprovechado.
Gracis y cariños.
Hola.
Gracias a tus instrucciones puede modificar mi blog!
Luego de probar un rato distintos valores pude agregar una columna.
Muchas Gracias.
P.D. Me falta "acomodar" bastante pero de a poco...
Me aparece este error:
El código ID del nuevo widget "NewProfile" no es válido para este tipo: Profile
¿que debo hacer?
Publicar un comentario en la entrada