Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Hace algún tiempo
jabel me solicitaba en un comentario, ayuda para colocar una nueva sidebar a su blog, así como poder cambiar el tamaño y tipo de fuente de las columnas, de forma independiente a la del resto del blog.
Se me olvidó el post en "borradores" hasta hoy que recibí un email de
Julio donde me pide las tres columnas para la Harbor, así que ¡allá va!
El ancho del blog, columnas y post que yo uso en el ejemplo, es siempre el que considero el más correcto, más que nada, porque lo he probado con IE y Firefox, y se ve optimamente en los dos navegadores. Cada uno puede luego modificarlo según sus necesidades, usando las explicaciones como simple guía.
Bien, en primer lugar, voy a explicar como colocar una nueva sidebar a la plantilla Harbor de Blogger, que es la que usa jabel.
1- Nos situamos en el html de nuestra plantilla y localizamos esta parte del código:
#outer-wrapper {
Aquí es donde ampliaremos la anchura total del blog, que pondremos en 1000 pixeles, para ello cambiamos el max-width:890px; a max-width:100%;
2- Un poco más abajo, vemos el #main-wrapper { o contenedor de entradas, vamos a modificar su anchura, que en este caso viene dada en porcentaje:
#main-wrapper {
width:64%;
cambiamos dicho porcentaje a 50%.
Justo debajo, en #main { cambiaremos el padding a 10px:
#main {
margin:0;
padding:10px;
}
3- Trabajaremos ahora con las sidebar, un poco más abajo, localizamos #sidebar-wrapper { modificamos el porcentaje del width a 25%:
#sidebar-wrapper {
width:25%;
Y en #sidebar { añadimos una línea de código, padding:10px; para separar el texto del borde:
#sidebar {
margin:0;
padding:10px;
4- Vamos ahora a incluir el código necesario para la nueva columna y, como en otras ocasiones, lo hacemos copiando el código de la sidebar que ya tenemos y pegandolo debajo de esta, modificando una vez copiada, el float de left a right, para que la nueva columna se vea al otro lado de las entradas y su nombre, como suelo hacer, la he llamado newsidebar:
#newsidebar-wrapper {
width:25%;
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 {
margin:0;
padding:10px;
padding-top: 0px;
}
Si nos fijamos en el código de la nueva sidebar, he puesto el padding-top: en cero pixeles, esto marca la distancia de la parte de arriba de la sidebar a la cabecera, cada uno puede marcar la distancia que le convenga, si la ponemos en cero, el comienzo de la nueva columna, quedará igualada con el de los post, a mi me gusta así pero, como ya he dicho, es decisión de cada uno.
5- Colocaremos ahora el código necesario para que nuestra nueva sidebar se muestre en el blog y nos permita añadirle elementos. Vamos hacia abajo de nuestra plantilla y en la parte del html, localizamos esta línea:
<div id='main-wrapper'>
Y justo encima, pegamos el código:
<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>
6- Usamos la vista previa y tendremos que ver las dos columnas a cada lado, en la nueva sidebar se muestra nuestro perfil, que podremos eliminar más tarde. Si todo está como esperábamos, guardamos cambios.
7- Si ahora miramos en la parte de añadir elementos, comprobaremos que su aspecto es bastante desestructurado, para corregir esto, iremos de nuevo a la plantilla y localizaremos esto en el CSS:
body#layout #sidebar-wrapper {
donde cambiaremos el width a 250px:
body#layout #sidebar-wrapper {
width: 250px;
margin-left: 0;
}
Haremos lo mismo, justo debajo, en body#layout #wrap4, body#layout #outer-wrapper { cambiando el width a 1000px:
body#layout #wrap4, body#layout #outer-wrapper {
width: 1000px;
}
Ya tenemos nuestra plantilla Harbor con tres columnas, ahora haremos las modificaciones necesarias para, como solicitaba jabel, podamos controlar de forma independiente el formato de las sidebar.
Tendremos que colocar una nueva variable en nuestra plantilla, y lo haremos en la parte de arriba, donde vemos unas cuantas líneas que comienzan todas igual, con <Variable name=
Este es el código para la nueva variable, que podemos colocar,por ejemplo, a continuación de las que ya hay, o sea, después de la última, pero antes del cierre de estas */
<Variable name="sidebarbodyfont" description="Sidebar Text Font" type="font"default="normal normal 100% Georgia,Serif" value="normal normal 100% Arial, sans-serif">
Una vez colocada la nueva variable, hemos de hacer que las sidebar reciban la "orden" desde esa variable, para ello, colocamos en el código de las sidebar una nueva línea: font:$sidebarbodyfont
#sidebar {
margin:0;
padding:10px;
padding-top: 170px;
font:$sidebarbodyfont
}
#newsidebar {
margin:0;
padding:10px;
padding-top: 0px;
font:$sidebarbodyfont
}
Después de guardar los cambios, si vamos a "fuentes y colores" veremos una nueva opción que se muestra como "Sidebar Text Font", desde ahí podremos escoger el tipo, estilo y tamaño de fuente de las columnas independientemente del formato del resto del blog.
DESCARGAR PLANTILLA
Fácilmente podríamos, por ejemplo, modificar nuestra imagen del perfil: el tamaño, borde, distancia al marco, posición...
