Agregar nueva columna - Plantilla Mínima Lefty

En esta entrada veremos cómo agregar una nueva columna a la plantilla Mínima Lefty y sus derivaciones.
Agregar nueva columna - Plantilla Mínima LeftyEn primer lugar, realizaremos la copia de seguridad de la plantilla tal y como explica en esta entrada del blog.

Una vez realizada la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos el siguiente código:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Modificamos el 660 px por 870 px para aumentar el ancho del blog.

Ahora, vamos a definir la nueva columna. Para ello, copiamos el código que aparece justo debajo del main-wrapper y lo pegamos realizando las modificaciones necesarias, quedando el código de la nueva columna de la siguiente forma:

#newsidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

Una vez que hemos realizado estas modificaciones en la definición de los objetos de la plantilla, vamos a agregar definitivamente la nueva columna. Para ello, buscamos y copiamos este código:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>

Una vez copiado, lo modificamos y pegamos justo debajo, quedando el nuevo código de la siguiente manera:

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

Seleccionamos de nuevo el código de la barra lateral inicial (sidebar-wrapper) y lo pegamos antes de la línea <div id='main-wrapper'>

Guardamos las modificaciones realizadas en la plantilla y nos dirigimos a la opción Elementos de la página.

Agregamos un nuevo gadget a la nueva columna para poder comprobar su existencia en el blog, guardamos de nuevo los cambios y comprobamos que el resultado debería parecerse a la siguiente imagen.

Agregar nueva columna - Plantilla Mínima LeftyComo podemos comprobar las dos columnas han quedado en el mismo lado. Para poder una a cada lado, accedemos de nuevo a la opción Edición de HTML, buscamos el siguiente código

#main-wrapper {
width: 410px;
float: $endSide;
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 */
}

y modificamos la alineación (float) al valor $startSide.

Para terminar con esta plantilla, si queremos igualar el espacio que hay entre la barra lateral y la zona de las entradas, añadimos la siguiente línea de código en la definición de la barra lateral (sidebar-wrapper).

padding-$endSide:1em;

Guardamos los cambios y comprobamos el resultado final.

Agregar nueva columna - Plantilla Mínima Lefty

30 comentarios:

Regi dijo...

no me ha salido.... no la encuentro facil de entender tu explicacion.
Gracias de todas formas por la informacion ;)

José M. dijo...

Debes darte cuenta que el código de la plantilla está escrito en XML, lenguaje de programación que si no has visto nunca puede resultarte algo complicado.

Intenta ver alguna de las otras entradas de Agregar nueva columna a ver si las expliqué mejor, o rellando el formulario de contacto puedes contactar conmigo.

Saludos.

Unknown dijo...

Hola tengo un blog el cual ya avia modificado para que tuviera dos culunas pero, sin previo aviso una de las colunas se pociciono abajo de los post. Y no se como areglar esto.

Yo quisiera enviarte todo el codigo HTML para ver si tu me puedes ayudar.

Si aceptas ayudarme mi correo es: anti-haker@live.com

Ayudame lo antes pocible...

José M. dijo...

Hola Anti-haker,

lo único que debes hacer es aumentar el ancho general del blog para que esa columna quepa en pantalla y no se posicione en la parte inferior.

Saludos.

CENTRO AVIVAMIENTO ASAMBLEAS DE DIOS BONAO dijo...

hola paz a ustedes tengo el deseo de traabajar un poco el blog aumentarle a tres colunna y agregarle algunos gagee de enbellesimiento

José M. dijo...

Espero que lo consigas, saludos :)

Kemerer Johana dijo...

hola, me fue muy util tu informacion...auqq las columnas me quedan a la derecha aunq aga el ultimo proceso :(

José M. dijo...

supongo que ya lo has arreglado, porque yo veo una a cada lado :S

Anónimo dijo...

NO-ME-SA-LE. SIGO AL PIE DE LA LETRA TUS INDICACIONES Y NO HAY CASO. CUANDO PONGO "VISTA PRELIMINAR" ME TIRA UN ERROR. HASTA AGREGAR LA NUEVA COLUMNA TODO BIEN. CUANDO TENGO QUE AGREGAR LO SIGUIENTE NO HAY CASO. ME ENCANTARIA SABER QUE ESTAY HACIENDO MAL. SALUDOS

José M. dijo...

comprueba que lo estás aplicando a la misma plantilla que figura en esta entrada.

Si es otra plantilla, mira las otras entradas de esta misma categoría.

Anónimo dijo...

EL PROBLEMA ES QUE SI DESCARGO LA PLANTILLA YA MODIFICADA POR VOS, PIERDO TODAS LAS ENTRADAS QUE HE PUBLICADO. TE PUEDO PASAR MI PLANTILLA POR MAIL PARA VER SI LA PUEDES MODIFICAR TU?. DESDE YA MUCHAS GRACIAS

José M. dijo...

Pon la dirección de tu blog e intento mirarlo por ahi :)

Anónimo dijo...

LO LOGRE!!!!!!!!!!!!!. GRACIAS POR TODO.

José M. dijo...

me alegro que lo hayas conseguido, saludos :)

Anónimo dijo...

Hola, para la plantilla minima strecht es el mis mo proceso? estoy buscando x todos lados y no puedo dar con el tuto para esta plantilla... me podras dar una mano?

Atte, Comicmaniako/Pablo
comicmaniako@hotmail.com

José M. dijo...

Hola Anónimo,

dado que la plantilla que indicas no tiene definida la anchura y las dimensiones de las barras laterales vienen en porcentaje, deberías mirar la entrada dedicada a la plantilla Sand Dollar que es similar (no igual).

Saludos :)

Hipertiempo dijo...

hola, si yo otra vez, mira, directamente aplique la plantilla sanddollar, y me quedo joya, el tema es que ahora caigo de que no tengo lugar para agregar gadgets en la parte inferior del blog (creo que se llama footer) se puede agregar?
te dejo la dire del blog para que veas
www.hipertiempo.blogspot.com.ar
gracias
comicmaniako
comicmaniako@hotmail.com

José M. dijo...

Hola comicmaniako

lo has eliminado?? por si acaso, haz lo que te pone en esta entrada a ver si solo lo has ocultado.

Saludos :)

Hipertiempo dijo...

no creo haber eliminado nada, ya que baje la que tu modificaste y que tienes posteada en una entrada anterior... ademas creo que no lo tiene, yo quiero saber si se puede agregar de la misma manera que un sidebar, no se si me explico...
gracias por tu tiempo!!!

comicmaniako
httcomicmaniako@hotmail.com
http://hipertiempo.blogspot.com/

José M. dijo...

Pues si has descargado la que he subido yo, solo tienes que acceder a Diseño -> Elementos de la página y podrás comprobar que en la parte inferior tienes el espacio para añadir un gadget en el pie de blog.

Hipertiempo dijo...

Hola, te cuento que no lo habia eliminado, quedo oculto cuando elimine una imagen... gracias por la ayuda... te pido un ultimo favor, necesitaria que me digas como se ve visualmente el blog, mas que nada como se ven las fuentes en pantalla, ya que recibi una critica... en mi monitor se ve joya, la imagen depende del monitor? lo puedes chequear?

comicmaniako

comicmaniako@hotmail.com
http://hipertiempo.blogspot.com/

José M. dijo...

Sí, depende de la resolución de pantalla que utilices, yo suelo ajustarlo a una resolución de 1024 x 768 píxeles, ya que hay mucha gente que la usa, y siendo esa la resolución tu imagen de cabecera y las imágenes que hay justo debajo se salen bastante de la pantalla.

Además, la imagen de cabecera tarda bastante en descargarse por lo que es de suponer que pesa bastante, intenta reducir el tamaño de archivo de esa imagen con algún programa como Photoshop o similar.
El resultado a la vista apenas se notará, pero reducirás considerablemente el tamaño y con ello el tiempo de descarga.

Los demás elementos del blog y la nueva columna están perfectamente ajustados a una resolución de 1024 x 768 píxeles.

Saludos :)

Hipertiempo dijo...

uhh... Soy un idiota... achique la imagen... el problema es que no se centrarla!! debo modificar el codigo html? que parte?

comicmaniako

comicmaniako@hotmail.com
http://hipertiempo.blogspot.com/

José M. dijo...

bueno acabo de ver tu blog y creo que ya lo has solucionado, saludos :)

comicmaniako dijo...

Hola, te molestootra vez, mira, el fondo de mi blog es de color negro y el problema que tengo es que los comentarios no se ven por que la letra es de ese color... hay alguna manera de cambiarle el color?

desde ya muchas gracias

comicmaniako
http://hipertiempo.blogspot.com/

José M. dijo...

Prueba con esto

César Morales dijo...

Hola jose, fijate que segui al pie de la letra tus instrucciones pero no logro poner la nueva columna al lado derecho, ya hice todo lo que tu dices pero no puedo, donde me pierdo es donde dices que seleccionemos el codigo de la barra lateral inicial (sidebar-wrapper)y lo pegamos antes de la linea -------- ya lo hice y me salen todos estso codigos en el blog, que puedo hacer necesito ayuda

José M. dijo...

Hola César

la verdad es que el trabajo con códigos siempre suele dar algún que otro problema.

En primer lugar, mira este enlace donde dejé en descarga directa las plantillas. No te digo que incorpores inmediatamente la mía, sino que intentes averiguar viendo el código de una y el de la otra dónde estás cometiendo el fallo.

Lo segundo que te aconsejo es que accedas a Blogger in draft, una opción de Blogger donde te va a permitir, entre otras cosas, añadir columnas y modificar el diseño de tu blog de forma visual sin necesidad de introducir ningún código.

Un saludo y espero que lo consigas :)

César Morales dijo...

Hola José, muchas gracias por tus recomendaciones realmente me sirvió de mucho, seguí tus instrucciones, ingrese a Blogger in draft y cambie el estilo de la plantilla, fue la única forma de tener una columna adicional, no lo hubiera logrado si no es por tu valiosísimo aporte. Te agradezco un montón.
Te felicito por tu blog.
Saludos

José M. dijo...

Gracias César por tu comentario, me alegro que lo hayas conseguido :-)

Publicar un comentario

Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.