Lo primero de todo, como siempre, antes de realizar cualquier modificación os aconsejo que hagáis la copia de seguridad de la plantilla.Una vez realizada, accedemos a la ficha Diseño -> Edición de HTML y buscamos el siguiente código:
@media all {
div#main {
float:$endSide;
width:66%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
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 */
}
div#sidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $startSide;
width: 31%;
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 */
}
}
En el código anterior podemos ver la definición de la zona donde se sitúan las entradas (div#main) y la barra lateral (div#sidebar) que tenemos a la izquierda.
A diferencia de las otras plantillas que hemos visto hasta ahora, ésta tiene definida la anchura (witdh) en porcentaje en vez de en píxeles. Vemos que la zona de las entradas tiene una anchura del está definida al 66% y la barra lateral al 31%.
Para agregar la nueva columna, vamos a modificar el ancho anterior, estableciéndolo al 50% para la zona de las entradas y al 23% para la barra lateral.
Una vez hayamos modificado los valores anteriores, agregaremos el código de la nueva columna justo debajo de la llave de cierre de div#sidebar.
div#newsidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $endSide;
width: 25%;
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 añadido el código, nos dirigimos a la parte del cuerpo (body) de la plantilla para agregar la nueva columna.Para ello, buscamos el 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>
lo copiamos y lo pegamos, realizando las modificaciones necesarias, justo antes de la línea
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
Guardamos los cambios, agregamos un gadget a la nueva columna desde la opción Elementos de la página y comprobamos el resultado final.
13 comentarios:
jose soi inma le del blog de musica sigueme plisssssssss
gracias por tu comentario, te seguiré, saludos.
Antes de nada,mis felicitaciones por tu blog.
He añadido una nueva colunna en mi plantilla,tal y como explicas aquí,pero me surge un problema.....La nueva colunna no está delimitada y el color de los titulos es diferente a la colunna de la derecha,al igual que el tamaño de la fuente.Como he de hacer para corregir esto?Ayúdame por favor
Me gustaria saber,si puede ser, de que manera puedo cambiar el estilo de mis colunnas,para que se viera igual a las que tienes tú aqui en tu blog,que se viera delimitado y no todo junto como se en mi blog.La direcion de mi blog es la siguiente:
http://lascosasdeyssa.blogspot.com/
Hola YSSA,
acabo de ver tu blog y no veo realmente donde tienes el problema, me imagino que lo habrás quitado puesto que solo veo dos columnas.
Saludos.
http://santacruzfutsala.blogspot.com/
Hola, lo intente por todos lados y solo logre algunas modificaciones. Con la nueva columna que ocurre con la informacion ya publicada en la de la izquierda, se pierde?.
Hola Julio,
no se pierde nada, lo único que haces agregando una nueva columna es tener más espacio para agregar gadgets nuevos. Al final te quedará algo parecido a la estructura que puedes ver en este blog, una columna central en la que aparece el contenido de las entradas del blog y dos barras laterales para agregar gadgets.
Gracias La Habanera por tu comentario, saludos :)
Hola, tengo una duda que me gustaría, si puedes y quieres, que me ayudaras a resolver. Seguí tus instrucciones para crear la tercera columna, el problema es que varios amigos y conocidos me han dicho que ven el blog desconfigurado. Primero ven la nueva columna, debajo de esta aparece la columna central con las entradas y siguiendo a esta la columna que tendría que estar a la derecha.
Sin embargo a mi se me ve bien y da la casualidad que algunos de los conocidos que ven mal el blog utilizan el firefox, ¿hay alguna manera de solucionarlo y que se le vea bien a todo el mundo?
Hola Sr Nocivo,
puede influir la resolución de pantalla que tengan pero creo que con el aumento del ancho del blog podrás solucionarlo.
Saludos :)
gracias por responder tan pronto y por todas las explicaciones que subes a tu blog
gracias jose me sirvio de mucho tu codigo le agregue dos lineas para q aparecer el borde del lado derecho no me deja copiartelo y pegartelo pero stois egura q lo encontraras jeje
de nada :) ... la segunda parte de tu comentario no la entiendo mucho :S
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.