Agregar una nueva sidebar a una plantilla Blogger es una de las preguntas m??s comunes entre lo usuarios de la plataforma para blogs de Google. Agregar una segunda sidebar varia en complejidad de acuerdo al dise??o que se trate, as??, mientras algunas solo requieran cambiar unas lineas de css, otras necesitar??n de una remodelaci??n total que tal vez hagan m??s conveniente cambiar de dise??o.
A grandes rasgos el proceso es el siguiente:
- Analizar la estructura y estilos de la plantilla.
- Agregar un nueva zona editable, es decir, la nueva zona para agregar los gadgets.
- Modificar estilos.
Para seguir sin problema este y cualquier tutorial que implica hacer cambios en la estructura de un blog o sitio web es muy recomendable saber algo de html y css. Entonces:
Analizar la estructura y estilos de la plantilla
La mayor??a de las plantillas, y especialmente las de Blogger, tienen una estructura muy similar, un header (cabecera) con t??tulo y descripci??n, un contenedor con la columna principal y una sidebar (barra lateral) y un footer (p??e de p??gina) con cr??ditos y otra informaci??n.
Para este caso, es de inter??s el contenedor, donde se encuentra el contenido y la sidebar, desde el c??digo de Blogger (Dise??o / Edici??n HTML) este se ve como:
Varia un poco de plantilla en plantilla, pero generalmente es muy similar a lo anterior. Tanto main-wrapper (columna principal) como sidebar-wrapper (contenedor del sidebar) est??n definidos por estilos css que determinan su ancho, fondo y otras caracter??sticas. As?? que lo primero ser?? averiguar estas caracter??sticas buscando algo como:
#main-wrapper {
float:left;
width:620px;
/*.... otros atributos ... */
}
#sidebar-wrapper {
float:right;
width:300px;
/*.... otros atributos ... */
}Nota: Seguramente no los encontraran juntos ni exactamente igual y en algunas ocasiones, m??s de una vez.
Aqu?? es importante ver los anchos (width) de cada elemento, pues para agregar una nueva barra hay que cambiar la distribuci??n. Al sumar los anchos del c??digo de ejemplo se tiene un total de 920px, el cual ser?? el espacio disponible para el contenedor principal y las sidebars.
Agregar un nueva zona editable.
Agregar una nueva zona editable en blogger es muy sencillo, estas est??n definidas por elementos ???section??? que al incluirlos en el c??digo ya pueden contener gadgets (elementos de p??gina). El c??digo de una nueva zona editable es algo como:
Y para agregar una nueva zona editable, solo hay que agregar este c??digo justo despu??s de la zona editable existente:
Hay que tener cuidado que el ID de la nueva zona, no exista en otro elemento ???section???, es por eso que en el ejemplo aparece como ???sidebar2???. La clase puede repetirse y en el caso de los sidebars hasta es conveniente que lo haga. Como es una zona nueva, no necesita tener c??digo de gadgets, estos se integraran autom??ticamente cuando agreguemos un nuevo gadgets desde ???Elementos de p??gina???.
Con esto ya hay una zona editable pero como no la plantilla no esta preparada seguramente se deformar??a, as?? que falta hacer algunos cambios.
Modificar estilos.
Ya sabemos el ancho total disponible y tenemos la zona editable, as?? que hay que cambiar determinar el ancho de cada elemento. Siguiendo el ejemplo; main-wrapper se reduce a 540px y sidebar-wrapper el ahora contenedor de ambas sidebars se aumenta a 380px. Quedando los estilos como sigue:
#main-wrapper {
float:left;
width:540px;
/*.... otros atributos ... */
}
#sidebar-wrapper {
float:right;
width:380px;
/*.... otros atributos ... */
}De esto modo el espacio disponible para ambas sidebars es de 380px. Lo m??s comun es ambas tengan el mismo ancho, es decir que ocupen el 50% cada una. A partir de lo IDs de cada zona editable definimos el ancho de cada una y su ubicaci??n (derecha ??? izquierda) dentro del contenedor sidebar-wrapper, agregando los estilos:
#sidebar {
width:50%;
float:left;
/*.... otros atributos que consideres necesarios: padding, margin, etc ... */
}
#sidebar2 {
width:50%;
float:right;
/*.... otros atributos que consideres necesarios: padding, margin, etc ... */
}Con esto ya se tiene 2 sidebars de un ancho de 190px cada una, capaces de soportar gadgets.
Observaciones
Algunas plantillas pueden tener problemas al cambiar el ancho del sidebar o el contenedor principal, sobre todo aquellas basadas en im??genes fijas que obviamente no cambian de tama??o al reducirse el ancho. En tal caso se pueden editar las im??genes con photoshop para adaptarlas al nuevo ancho.
No Comments Found