JMiur [E]

Ignasi nos muestra en El meu mon My world, la forma de agregar una sección en la sidebar de Blogger.

Hay que aclarar dos cosas, una sección no es una nueva sidebar como se ve normalmente sino una especie de clón de la primera que se ubicará justo debajo de esta. Al definirla, podemos darle propiedades diferentes y hacer que el blog sea gráficamente más flexible.

Por otro lado, los códigos no se van a adaptar a cualquier plantilla (eso es imposible) pero están lo suficientemente detallados como para que podamos entender el concepto.

Luego de hacer el correspondiente backup de la plantilla, vamos a DISEÑO, EDITAR HTML y marcamos la opción "Expandir elementos".

Allí, buscamos esto:
/* Variable definitions ====================
Esta es la parte de estilo que define las variables utilizadas por Blogger para que podamos modificar colores y fuentes desde la parte de diseño, sin necesidad de escribir directamente en la plantilla.

Ahí, agregamos lo siguiente:
<Variable name="bottomSidebar2BgColor"
description="Bottom Sidebar Two Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="bottomSidebar2TextColor"
description="Bottom Sidebar Two Text Color"
type="color" default="#666" value="#666666">
<Variable name="bottomSidebar2LinkColor"
description="Bottom Sidebar Two Link Color"
type="color" default="#475" value="#447755">
<Variable name="bottomSidebar2VisitedLinkColor"
description="Bottom Sidebar Two Visited Link Color"
type="color" default="#798" value="#779988">
Luego, dentro de la misma hoja de estilo, buscamos esto:
/* Sidebar Boxes -------------------------*/
o, de no existir, cualquier otro lugar es aceptable, siempre y cuando esté debajo de las otras definiciones de la sidebar. Ahora, agregamos las propiedades que tendrá la nueva sección:
.sidebar2 .widget {
margin:.5em 13px 1.25em;
padding:0 0px;
}

.widget-content {
margin-top: 0.5em;
}

#sidebarbottom-wrap3 {
background: $bottomSidebar2BgColor
url("http://img502.imageshack.us/img502/7693/cornerssidetop2cj8.gif")
no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $bottomSidebar2TextColor;
}

#sidebarbottom-wrap4 {
background: transparent
url("http://img502.imageshack.us/img502/9990/cornerssidebot2gz9.gif")
no-repeat left bottom;
padding:8px 0px 8px;
}

#sidebar2 {
background: transparent
url("http://img502.imageshack.us/img502/6652/railsside2qn8.gif")
repeat-y;
color: $bottomSidebar2TextColor;
}

#sidebar2 h2 {
color: $bottomSidebar2TextColor;
border-bottom: 1px dotted $bottomSidebar2TextColor;
margin-bottom: 0.5em;
}

#sidebar2 a {
color: $bottomSidebar2LinkColor;
}

#sidebar2 a:hover, #sidebar2 a:visited {
color: $bottomSidebar2VisitedLinkColor;
}

.sidebar2 h2 {
margin:0;
padding:0 0 .2em;
line-height:1.5em;
font:$headerFont;
}

.sidebar2 ul {
list-style:none;
margin:0 0 1.25em;
padding:0 0px;
}

.sidebar2 ul li {
background: traanpsrent url("http://www.blogblog.com/rounders4/icon_arrow_sm.gif")
no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted $borderColor;
line-height:1.4em;
}

.sidebar2 p {
margin:0 0 .6em;
}
Como se ve, básicamente, se repiten las mismas propiedades que tenemos para la sidebar existente, excepto que a esta la llamaremos sidebar2.

Luego, justo antes de:
<div id='footer-wrap1'><div id='footer-wrap2'>
agregaremos el código HTML:
<div id='sidebarbottom-wrap3'>
<div id='sidebarbottom-wrap4'>
<b:section class='sidebar2' id='sidebar2'></b:section>
</div>
</div>
Una vez que guardamos la plantilla, en el la primera solapa de diseño aparecerá la nueva sección y desde allí podremos modificar colores y otros parámetros.

11 comentarios:

Ignasi  

Hola!

Primero de todo gracias por haber hecho eco de esta pequeña aportacioón a la comunidad, es la primera que hago y bueno, estoy contento que la pueda leer aqui :$

Gracias!

Responder
JMiur  

Gracias a vos por el aporte y por habérmelo enviado :)

Responder
Anónimo  

Hola, el problema queme encuentro yo es o son dos:

cuando añado el código para el sidebar2 me da error (siempre en la sección del sidebar).

Después no tengo el código div que se especifica, lo he buscado hasta la saciedad y no aparece...

¿alguna idea de esto?

gracias

Responder
Anónimo  

Hola de nuevo, he podido insertar correctamente las descripciones de sidebar2 sustituyendo algunos parámetros que especificaban el margen y el texto. Pero sigo sin encontrar el sitio para insertar el div. En las pruebas que realizo el mensaje es este: "The element type "div" must be terminated by the matching end-tag ". No tengo en la plantilla ningún parámetro que se llame "sidebarbotton". Estoy realizando pruebas en el contenido de los artilujios del menú lateral pero no resulta....

gracias

Responder
JMiur  

Tendría que ver el código que colocas, pero, el mensaje de error indica que falta una etiqueta </div>

Es un poco difícil guiarte sin ver el blog, el problema es que las variaciones de las plantillas son muchas.

sidebarbottom es el nombre que se le ha dado a los nuevos elementos así que no están en la plantilla original.

Responder
Anónimo  

Si jmiur gracias por contestar.
la plantilla que uso es de blog and web, la blogy ondas:

http://blogandweb.com/2007/06/17/plantilla-blogy-ondas/

definitivamente no he podido insertar el div correctamente, en las pruebas que realizo o me da fallo o me aparece la ventana de insertar elementos (en modo diseño) en lugares distintos.

gracias de nuevo

Responder
LordHide®  

buxa...

...no sé si aún revisas tus articulos anteriores... pero he intentado seguir las indicaciones q das aki, i no he podido aun insertar una nueva seccion...

http://ecosembotados.blogspot.com

es mi blog...


... podrias exarme una mano? por favor!!!


xcias.

Responder
JMiur  

Acabo de ver tu blog. Tal vez se complique un poco porque la plantilla tiene muchas imágenes pero eso puede resolverse.

¿Por que no me envías un mail y me cuentas que intentaste hacer y que problemas surgieron?

vagabundia@gmail.com

Responder
Freak  

Hola, gracias por tanta ayuda.
Yo he seguido los pasos que indicas hasta el final, en que me da este error:

Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida. Información: headerFont.

He buscado los headerfont en la plantilla y hay 4, pero ni idea de lo que he de hacer ahora. A ver si me puedes orientar. Mil gracias.

Responder
María de las Mercedes  

Hola!! Tengo un problema...en mi blog buscandolabuenasuerte.blogspot.com.ar quiero agregar una nueva columna a la izquierda pero la plantilla que tengo instalada es muy complicada de entender para mi. No encuentro lo de content-wrapper ni algo que se le parezca. Podrías ayudarme???? Dónde debo agregar el div de la nueva columna???? Los estilos, más o menos, los tengo....pero se me dificulta lo de agregar el div o la sección nueva para que aparezca en los elementos de página...gracias!!!!

JMiur  

En esa plantilla, el DIV contenedor se llama main-wrapper
<div id='main-wrapper'>

y allí dentro hay dos divs que deben ser secciones
<div id='content' class='grid_8 section'> ... </div>
<div id='sidebar' class='grid_4 omega section'> ... </div>

así que allí es donde debes agregar la nueva sección. Muchos más detalles no puedo darte ya que todo eso sólo es visible en la plantilla misma.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR