martes, 2 de septiembre de 2008

dejá de jugar con el blog - 2da parte

Finalmente me decidí y puse la segunda columna en el blog, también le saqué el borde al header.

Y como lo prometido es deuda dejo unas mini instrucciones de como hacer para agregar la segunda columna.

En la parte de diseño Ir a la "Edición de HTML".

En el código buscar el fragmento que dice algo así:

#sidebar-wrapper {
  margin-left: 5%;
  width: 20%;
  float: right;
  word-wrap: break-word;
  }


Entre las llaves puede haber diferentes cosas de acuerdo al template que tengamos. Eso es lo que maneja el estilo de la barra, dice como se ve.

Hay que copiar ese fragmento desde el # hasta la } y pegarlo abajo.
Para poder diferenciarlos hay que cambiarle el nombre (lo que está después del #) yo le puse leftsidebar-wrapper.

Dentro del estilo hay que indicar de que lado queremos que aparezca la barra, esto se hace dándole un valor al atributo float, los valores posibles son "left" y "right". Si le dejamos el mismo valor a las dos quedan juntas del mismo lado.

#leftsidebar-wrapper {
  width: 20%;
  margin-right: 5%;
  float: left;
  word-wrap: break-word;
  } 


Ahora que ya tenemos el estilo para la columna hay que crearla, para eso hay que copiar la que ya tenemos y cambiarle el estilo para que use el nuevo. Para eso buscamos algo como esto:

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
          <b:widget id='BlogArchive1' type='BlogArchive'/>
          <b:widget id='BlogList1' type='BlogList'/>
        </b:section>
      </div>
Lo copiamos y pegamos abajo, modificamos los dos id de acuerdo al nombre que le pusimos al nuevo estilo y borramos los widgets:


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

        </b:section>
      </div>
Listo ya tenemos dos sidebars... peeeeero si vamos a la vista previa segurísimo que se ve horrible, con una de las barras abajo de todo el texto, para solucionar esto hay que jugar con los anchos de las barras y de el panel central, esto se hace modificando el valor del width en los estilos de las 2 barras y del main-wrapper, el valor se expresa en porcentaje, yo le puse 20% a cada sidebar y 50% al principal, el 10% restante lo usé como margen (margin-left, margin-right).

Ahora sí, después de hacer varias pruebas y cometer varios errores van a quedar las 3 columnas bonitas.

Al final quedó más largo de lo que yo esperaba...

P.S.: La columna aparece en la parte de "Elementos de la página" así que se pueden agregar widgets desde ahí y también arrastrar los que ya tenemos de una columna a la otra.

4 comentarios:

Halle dijo...

Quedó muy bueno!

Lores dijo...

Se te puede consultar ocmo catso hago para agregar lista de blogs a mi blog?

Lores

G-Fer dijo...

Yo voy a tener que hacer lo mismo. El problema es que le voy a tener que consultar al puto muy puto(?) de Fabio, a ver cómo carajo lo puedo hacer en PostRev.

Soy un boludo, tendría que haber armado el blog en Wordpress...

Nick dijo...

Mil gracias Halle, después de las horas que nos llevó de investigación a mi hermano y a mi era lo único que se podía esperar.

Lores: podés consultar... tenés que ir a "diseño" y abajo aparecen unas opciones, elegís la primera, "elementos de la página", abajo aparece un diagrama de tu blog, hacé click en el link "Añadir un gadget" y en la lista que aparece elegí "lista de blogs" y listo, solo resta que agregues las direcciones de los blogs a la lista.

G-Fer: postRev está escrito en PHP así que no me extrañaría que sea super difícil de cambiar, todo depende del nivel de aputosamiento del programador.