Agregar nueva columna - Plantilla Denim

Siguiendo con el tema agregar columnas al blog, hoy dedicaré esta entrada a la plantilla Denim y sus variantes.

agregar nueva columna al blogAntes de empezar, aclararé que como la explicación es la misma en todas las plantillas, a partir de hoy iré directamente al código que hay que modificar sin detenerme mucho en explicaciones puesto que las tenéis en las entrada del día 17 de Abril.

En primer lugar, antes de hacer cualquier modificación hacemos la copia de seguridad de la plantilla tal y como está explicado en esta entrada.

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

#sidebar-wrapper {
margin-$endSide: 14px;
width: 240px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}

Éste es el código de la barra lateral que tenemos a la izquierda del blog. Lo que haremos será copiar este código y lo pegarlo justo debajo modificando el nombre sidebar por newsidebar y la alineación (float) por $startSide.

A continuación, bajamos casi hasta el final de la plantilla y, en el cuerpo de la página (body), buscamos el código siguiente:

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

Éste es el código de la barra lateral derecha que tenemos en el blog junto con los gadgets. Lo copiamos y lo pegamos justo antes de <div id='main-wrapper'>

Eliminamos los gadgets que tiene incorporada la barra lateral, porque si no lo hacemos nos dará error por duplicidad de gadgets ya que hay algunos que son únicos y no pueden estar duplicados.
Además cambiaremos el nombre sidebar por newsidebar tal y como hemos hecho anteriormente, y el resultado final del código debería ser este:

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

Una vez hecho esto, guardamos los cambios, accedemos a la ficha Diseño -> Elementos de la página y agregamos un gadget a la nueva barra para poder apreciar la existencia de la misma.

Guardamos de nuevo los cambios y comprobamos el resultado.

A continuación, necesitamos modificar el ancho del blog puesto que como podemos ver la barra derecha aparece en la parte inferior por falta de espacio.

Accedemos de nuevo a la ficha Diseño -> Edición de HTML y buscamos el siguiente código dentro del apartado Content:

#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}

Tenemos definido un ancho para el blog de 760 píxeles que modificaremos al valor 990 px.

Guardamos los cambios y comprobamos que el resultado se debería parecer a la imagen que se muestra a continuación:

agregar nueva columna al blog

19 comentarios:

misaani dijo...

Hola, soy yo otra vez, me he pasado dos días intentando añadir otra columna a mi blog,ya que empieza a faltarme espacio y he tirado la toalla.
Al ser un modelo de plantilla distinto no me queda bien.
Acudo a tí, para cuando tengas tiempo crees una entrada con la plantilla que yo utilizo, ya que no me gustaría cambiarla.
gracias y un abrazo.

Unknown dijo...

Me he quedado bloqueado.. yo en mi html no tengo el bloque: #content-wrapper POR NINGÚN SITIO, ¿qué hago entonces?

José M. dijo...

misaani: estoy en ello, gracias.

José Amorós: debes comprobar la plantilla que tienes en tu blog. Dado que el código de una plantilla a otra puede variar, estoy creando entradas diferentes para cada una de las plantillas.

AFIpunkBOL dijo...

Hola resulto muy bien pero tengo mal puesto la columna
http://beautiful-thieves.blogspot.com/
los tengo los 2 columnas en la derecha...!!
ayuda

José M. dijo...

supongo que ya lo has solucionado, porque yo las veo cada una a un lado :S

AnGeLiCaTh dijo...

esta muy buena la pagina me ayudo mucho con esta informacion si pude meter una nueva columna gracias mmmm NOTA: chicos que no tienen el "content-wrapper " solo pegenlo abajo de la nueva columna osea newsidebar y ya tienen que ir viendo depende de su blog el tamaño de % o px y ya es facil no tengan miedo de moverle si se equivocan solo pongan ctr+z y ya gracias muy buena informacion XD

Anónimo dijo...

mil gracias por tu ayuda en verdad me has ayudado llevo mas de tres dias con estoy no podi ate sacaste un 100 graxii por tu valiosa ayuda en verdad...

gracias, Johana Arroyo

como ayudar a mi alumno dijo...

Hola, he seguido las instrucciones tal y como lo indics, pero me dice ue no puede guardarla por que el titulo debe ponerse al principio, no se que hacer, me puedes ayudar? gracias.

José M. dijo...

Hola como ayuda a mi alumno

comprueba que estás aplicándolo a la misma plantilla que esta entrada, si no es así, mira las demás entradas dedicadas al tema Agregar nueva columna.

como ayudar a mi alumno dijo...

Muchas gracias por tu rapida respuesta, pero no es ninguna, esta es la plantilla que utilizo, me podrias ayudar? http://www.4shared.com/file/215022210/aed7d96b/template-nio_nadando5283.html

José M. dijo...

supongo que quieres la nueva barra lateral a la izquierda verdad? bueno seguramente es posible pero se iba a desconfigurar toda la plantilla dado que viene formada por imágenes que se desajustarían al tener que desplazar el contenido del blog para hacer hueco a esa nueva columna.

carolina dijo...

bueno, supongo que la opcion es cambiar a otra plantilla. Pero muchas gracias por tu ayuda, tus explicaciones son sencillas y claras. buen dia.

José M. dijo...

de nada, saludos :)

Showman dijo...

Hola! mira profe, me quedo perfecto pero yo quria que las entradas me quedaran en el medio y me aparecen las entradas por un lado y las dos columnas juntas, y me aparece una columna abajo de todo.... quisiera poner las entradas en el medio de la columna izquierda y de la columa derecha... Gracias

José M. dijo...

Hola Showman

si te aparece una columna debajo, tienes que aumentar el ancho del blog

Showman dijo...

PERO YO LO AGRANDO A 990 COMO DICE! jaja no encerio, lo agrando a ese porcentaje y me queda la columna de las entradas a la izquierda y las dos columna juntas a la derecha..... por favor te suplico que me ayudes! encerio te agradeceria de todo corazon!... Muchisismas gracias por darle bola a mi "petecion" jeje

José M. dijo...

Hola Showman

ya veo en tu blog que has conseguido colocar la columna en el sitio adecuado, saludos :)

djmive dijo...

la verdad me e graduado como creador de pageblog no sabia ni papa de esto de html y con el afan de crear una columna nueva me volvi un esperto grasias por ese aporte talde mas de dos hora para hacerlo pero lo logre en hora buena dios le bendiga para verlo

http://djlosduenosdelnegocio.blogspot.com/

José M. dijo...

Gracias djmive por tu comentario y visita :-)

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.