Plantilla Blogger. Crear secciones III. Columnas. | Oloblogger Hemos visto cómo crear una sección sencilla y colocarla dónde nos interese y ahora veremos como hacer dos secciones a la misma altura, que f...

13 de mayo de 2009

Plantilla Blogger. Crear secciones III. Columnas.

Hemos visto cómo crear una sección sencilla y colocarla dónde nos interese y ahora veremos como hacer dos secciones a la misma altura, que funcionen como columnas independientes, pero que nos permitan añadir gadgets cómodamente.

Primero definimos en la parte CSS (antes de ]]></b:skin>) el ancho de los 2 contenedores (ID) necesarios y su alineación. También podemos añadir más atributos y en este ejemplo se ha incorporado la alineacion central del contenido, así como el color del texto.

Una columna flotará a la izquierda y otra a la derecha. En este caso utilizamos un ancho porcentual que en conjunto no llega al 100%, para que quede un margen entre ellas. Si se conoce el ancho del bloque donde se quieren incorporar, se puede poner un ancho fijo en pixels para cada columna, siempre que en total no superen el espacio disponible. Caso de que nos pasáramos, una columna pasaría a colocarse debajo de la otra.

#columna1 {
width:48%;
float:left;
text-align:center;
margin:0px auto;
color:red;
}

#columna2 {
width:48%;
float:right;
text-align:center;
margin:0px auto;
color:green;
}

Después necesitamos localizar el sitio dónde queremos colocar las dos columnas e insertamos las secciones. Una para cada columna. Para situarlas justo debajo de los post sería así...

<div class='main' id='main-wrapper'>
<b:section id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

<b:section class='columna1' id='columna1'/>
<b:section class='columna2' id='columna2'/>

</div>

Al no existir artilugios en esas secciones, no veremos nada con Vista Previa, pero si guardamos y accedemos a Elementos de Página, ya podemos comprobar que nuestras dos columnas están creadas.


Desde aquí mismo ya podemos comenzar a añadir contenido a las columnas, tal y cómo normalmente hacemos desde la barra lateral: Añadir gadget, escogemos tipo de gadget y redactamos/pegamos el contenido.

Con el mismo sistema, podemos crear más columnas:

CSS
#columna1 {
width:102px;
float:left;
}
#columna2 {
width:102px;
float:left;
}
#columna3 {
width:102px;
float:left;
}
#columna4 {
width:102px;
float:left;
}


HTML
<div class='main' id='main-wrapper'>
<b:section id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

<b:section class='columna1' id='columna1'/>
<b:section class='columna2' id='columna2'/>
<b:section class='columna3' id='columna3'/>
<b:section class='columna4' id='columna4'/>

</div>



Ver también:

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

126 comentarios :

  1. Un post muy útil e informativo. Además , al agregar más secciones nos permite colocar más widgets de una forma más ordenada.

    Saludos :)

    ResponderEliminar
  2. Ahhhhhh, alguna vez me lo pregunté si se podría... qué bueno idea, Oloman.

    ResponderEliminar
  3. hola Oloman,, muy buen post...
    pero tengo un problema con los elementos de pagina, no aparecen normal, aparecen asi:http://i733.photobucket.com/albums/ww338/lukitass_photo/elementosdepagina.jpg...
    espero que puedas solucionar mi problema...
    Muchas gracias...

    ResponderEliminar
  4. Luk!tass, si eso ocurre tras intentar añadir una nueva sección, cambia de ubicación con respecto a otras secciones el código correspondiente.

    Comprueba también los atributos que le asignaste a la clase correspondiente.

    ResponderEliminar
  5. Hola, está buenísimo tu blog. Estoy tratando de crear una revista digital, y quería saber si al crear varias columnas les puedo dar un atributo para que funcionen como entradas de blog independientes. Hice una pequeña prueba y cuando trato de crear otro widget en la barra lateral para que funcione como entrada de blog, me duplica las entradas de blog que tengo en la columna principal. Hay forma de que pueda hacerlas independientes para que funcionen como entradas distintas? mi idea es hacer algo como lo que tienen en www.vanidades.com, ya que alli manejan varias columnas y en cada una colocan varias articulos con imágenes y texto, que se pueden expandir para ver completos.
    Gracias, cualquier cosa mi correo es auka.ED@gmail.com

    ResponderEliminar
  6. Ese enlace que das es una web, no un blog. Un blog no está pensado para mostrar ese tipo de estructura. Lo normal es que te duplique los posts tal y como cuentas.

    Lo más parecido que puedes hacer, lo encontrarás explicado aquí.

    Puedes hacer una barra con cosas que no sean post y el resto que se muestre como anteriormente pudiste ver

    ResponderEliminar
  7. Genial Oloman, con eso creo que puedo intentar resolver y se acerca full a lo que quiero. Te felicito por toda esta página, tienes mucha pedagogía para explicar. Eso sin contar lo rápido jajaja. (soy nueva en esto y aún debo ir entendiendo la esencia del blogeo, pero tu blog me ha sido muy útil). Un millón hermano y mucho éxito.
    ;)

    ResponderEliminar
  8. No entendi muy bien..pero
    Y este codigo despues de donde dice:
    "Después necesitamos localizar el sitio dónde queremos colocar las dos columnas e insertamos las secciones. Una para cada columna. Para situarlas justo debajo de los post sería así..."

    Donde debe ir si quiero que salgan las dos columnas en la parte lateral derecha no debajo.
    Donde tienes los widgets "Archivos del blog" en la imagen de arriba.

    Mi blog es http://shinobi-retsuden.blogspot.com/
    puedes contestar en una entrada de ahi o enviarme un email a Victoravaloz(arroba)hotmail.com

    ResponderEliminar
  9. Kenji, si lo que quieres es hacer un apartado de dos columnas dentro de la sidebar, la nueva sección tendrá que ir delante del código de la sección SIDEBAR (o detrás). Si quieres ponerlo enmedio, tendrás que colocarlo detrás y luego añadir otra sección SIDEBAR2 a continuación.

    Todas estas modificaciones se hacen mejor sin expandir artilugios.

    ResponderEliminar
  10. No me funciono ..
    No se exactamente donde ponerlo , te pongo el codigo en este sitio.
    http://shinobi-retsuden.foroactivo.net/noticias-f3/codesssssssssssssssss-t13.htm

    Ahi esta el codigo completo , podrias añadirle las columnas para que se vea como dice en esta imagen
    http://i603.photobucket.com/albums/tt114/VictorAvaloz/minima4copia.jpg

    Y podrias copiarlo en un bloc de notas y subirlo a Megaupload o cualquier otro .. se que te pido mucho .. pero espero y me ayudes..

    ResponderEliminar
  11. Kenji, mejor haz una copia de seguridad de tu blog y me mandas por mail el fichero .xml que genera. En el enlace no veo nada (en el de la imagen sí).

    ResponderEliminar
  12. Por mi bien..pero no encuentro tu email :s

    ResponderEliminar
  13. En la zona de abajo, a la derecha del botón "No pinchar" ;)

    ResponderEliminar
  14. Bueno..ahorita te lo mando , pero no se bien como xD
    Lo subi a Megaupload.
    http://www.megaupload.com/?d=IC4LE7L5

    ResponderEliminar
  15. No hace falta, lo vi en el Megaupload.

    En el CSS:

    #sidebar {
    background-color:#fff;
    }

    /* INSERTADO NUEVO */
    #columna1 {
    width:48%;
    float:left;
    text-align:center;
    margin:0px auto;
    color:red;
    }

    #columna2 {
    width:48%;
    float:right;
    text-align:center;
    margin:0px auto;
    color:green;
    }
    /* FIN INSERTADO NUEVO */

    .narrowcolumn .entry {
    line-height: 1.4em;
    }


    Y sin expandir artilugios, en la parte HTML:

    <b:widget id='Feed1' locked='false' title='Previous Posts' type='Feed'/>
    </b:section>

    <!-- INSERTADO NUEVO -->
    <b:section class='columna1' id='columna1'/>
    <b:section class='columna2' id='columna2'/>
    <!-- FIN INSERTADO NUEVO -->

    </ul>
    <div id='sidebar1-bot'/>

    Si no grabas, no verás nada, pero si lo haces, en Elementos de Página podrás ver tus dos nuevas columnitas.

    ResponderEliminar
  16. Quisiera que apareciera una fila arriba y abajo de ella dos filas y abajo de las dos filas una fila.
    Ejemplo:
    -
    --
    -

    Y podrias ver el blog .. mira como quedaron :s
    http://shinobi-retsuden.blogspot.com/
    No se podria hacer mas ancho la parte blanca?

    ResponderEliminar
  17. Para que después de las dos columnas haya una sencilla, deberás añadir otra sección, en este caso con el código de la sidebar original:

    <b:widget id='Feed1' locked='false' title='Previous Posts' type='Feed'/>
    </b:section>

    <b:section class='columna1' id='columna1'/>
    <b:section class='columna2' id='columna2'/>

    <b:section class='sidebar section' id='sidebar'/>

    </ul>
    <div id='sidebar1-bot'/>

    La parte blanca se puede hacer más ancha, pero para eso tendrías que depurar primero tu plantilla. No sé por qué pero tienes el código CSS triplicado...

    ResponderEliminar
  18. depurar la plantilla?
    Cual codigo o.O
    Yo solo baje la plantilla y la instale , despues hize lo que ahi decia .. y le meti algunos codigos.

    ResponderEliminar
  19. Pues me parece que era un plantilla patatera, porque tienes todo el código repetido (innecesariamente) tres veces. Todo lo que hay entre <style> y </style>

    ResponderEliminar
  20. Bueno, no es que esté exactamente triplicada, pero tiene códigos del mismo contenedor, dispersos por todo el código. Así es complicado mantener la plantilla.Ejemplo:

    #sidebar {
    background-color:#fff;
    }
    ...Más abajo
    #sidebar {
    font: 11px Verdana, Arial, Georgia, Helvetica, sans-serif;
    line-height: 18px;
    background: #fff;
    }
    ...Mucho más abajo
    #sidebar {
    float:right;
    padding: 0;
    margin:0;
    width: 228px;
    min-height: 430px;
    }

    ResponderEliminar
  21. Al poner el codigo remarcado me da este error
    Se ha encontrado más de una sección con el ID: sidebar. Los ID de sección deben ser exclusivos.

    Mmm..busque el codigo style para borrar lo inecesario y no lo encontre :s

    ResponderEliminar
  22. :o
    Eso..
    Pasa que yo no se mucho de codigos..solo hago lo que me indican los tutoriales (si le quiero añadir algo)

    ResponderEliminar
  23. he tenido problemillas en el resultado final, no se muy bien que falla, he revisado el post y creo que lo he aplicado bien. A ver si me echais una mano.

    http://proyectandarq.blogspot.com

    ResponderEliminar
  24. Si te refieres a las dos columnitas al final de tu sidebar (feed y categorías), funcionan bien. Lo único que te falta es definir el estilo para las listas (ul y li) para las clases nuevas (.columna1 y .columna2).

    ResponderEliminar
  25. si, me refiero a esas columnitas. podrias decirme como se le da estilo ul y li?? es q soy novato, y voy haciendo las cosillas en funcion de los codigos que voy viendo. gracias y felicitaciones x el blog

    ResponderEliminar
  26. En la parte del CSS (antes del /HEAD) colocas estas subclases con los atributos que prefieras. Por ejemplo:

    #columna1 ul, #columna2 ul {
    text-align:left;
    padding:5px;
    }

    #columna1 ul li, #columna2 ul li{
    text-align:left;
    list-style-type:circle;
    }

    ResponderEliminar
  27. Holas Oloman exelente el post queria preguntarte en que parte deveria ingresar el codigo para que la columna aparezca por ensima del pie e pagina pero que no despaze el texto de este ose en donde dice powered by.....
    Un saludo y muchas gracias

    ResponderEliminar
  28. ¿Un link para verlo, martin?

    ResponderEliminar
  29. Hola oloman, he puesto debajo de las entradas las 2 columnas, pero la de la izquierda se encima con la sidebar. me ayudas a correrla?
    desde ya gracias
    Carlos

    ResponderEliminar
  30. ¿Las columnas son Política y Rosario, Carlo? Pues se ve que ya has encontrado el fallo. Si lo cuentas, puede servir para otros. Saludos.

    ResponderEliminar
  31. Hola Oloman!! Como hago para que me quede una columna a la izquierda de la entrada y otra a la derecha de la entrada, no sobre ella como se muestra en el grafico??

    ResponderEliminar
  32. Seba, entiendo que quieres un cuerpo central con los posts y una sidebar a cada lado. Como ya tienes una a la izquierda, echa un vistazo a este post dónde aproximadamente por la mitad, se explica cómo añadir una segunda barra lateral.

    ResponderEliminar
  33. Gracias!! Logre hacerlo!! :) No se muy bien como. Pero creo que estoy aprendiendo. Gracias de nuevo por la ayuda. Ahora siento que mi blog esta mas personalizado

    ResponderEliminar
  34. Anónimo6/8/09, 1:09

    existe alguna opcion donde pueda publicar una entrada, y que esta no me salga entera en la pagina inicial del blog, sino que dicha publicacion salga completa cuando pinche el enlace de leer mas?... soy nueva en esto, agradeceria cualquier ayuda

    ResponderEliminar
  35. Hola. Pon en nuestro buscador "leer mas" y te saldrán al menos un par de opciones.

    ResponderEliminar
  36. Hola!!! Me gustaría saber cómo hacer marcos o divisores de entradas... entre los diferentes gadgets que tengo
    Gracias!!!

    ResponderEliminar
  37. ¿Marcos o divisores de entradas? ¿Widgets?
    Normalmente las entradas están en el cuerpo principal del blog y los widgets en la barra lateral. Además son cosas distintas. ¿Qué es lo qué realmente quieres hacer?

    ResponderEliminar
  38. Oloman he puesto el codigo como me dijiste pero solo me sale una seccion bajo de las entradas gracias

    ResponderEliminar
  39. Para mi vuelta ten preparado el link al blog donde te pasa, que tienes varios.

    ResponderEliminar
  40. trate de hacerlo pero me sale un error, no se que ise mal =S estaba tratando con la plantilla de este blog http://practicasmuxas.blogspot.com/

    ResponderEliminar
  41. oloman y si kiero es dividir la ultima barra de los elementos de Pagina en 3 pedazos como esta en mi blog (aldarix.blogspot.com) como debo de hacer?

    ResponderEliminar
  42. Aldarix, para la primera pregunta echa un vistazo primero a los post I y II de esta colección y luego me comentas el caso concreto que quieres hacer.

    Para lo de los tres "pedazos" en el pie, sería igual que se explica aquí pero con tres columnas en lugar de cuatro, que es el segundo ejemplo que se da.

    ResponderEliminar
  43. Hola, muy interesante este articulo, pero me preguntaba si es posible añadir otra columna de posts, es decir, quisiera que en la seccion elementos de pagina se pueda ver dos secciones para entradas de blog, para tener dos columnas totalmente independientes la una de la otra. Es posible?

    ResponderEliminar
  44. ¿Cómo de independientes, Rosita? Se pueden poner las entradas una al lado de la otra, vamos en horizontal en lugar de vertical, pero si te refieres a más "independencia", ni siquiera se me ocurre con que criterio podríamos separar qué entradas van para cada lado.

    No sé si los tiros pudieran ir por aquí o por aquí o no es nada de eso...

    ResponderEliminar
  45. Claro, a lo que me referia era precisamente a tener en la seccion de elementos de pagina dos secciones para entradas de blog, para tener algo asi como un periodico en el que hay una columna digamos de noticias policiales y otra columna de espectaculos. Se que podemos usar etiquetas para cada uno de nuestros posts, pero queria saber si era posible crear dos columnas de un tema distinto en el blog.

    ResponderEliminar
  46. Se podría hacer para la página inicio, pero no se me ocurre ninguna manera de hacerlo para todo el blog. Se trataría de usar los feeds para mostrar un resumen de cada etiqueta en cada columna, pero esto requeriría que no tuvieras muchas categorías y no sé si es lo que quieres. ¿Viste los enlaces de mi anterior comentario por si te valían?

    ResponderEliminar
  47. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  48. Watesam, aparentemente ya tienes una sección abajo. Según he visto, está controlada por la clase footer-wrapper y es dónde tienes ahora mismo el copyright.
    Echa un vistazo al post anterior a este, porque es posible que tengas desactivada la opción de añadir gadgets (SHOWADDELEMENT)

    ResponderEliminar
  49. Solo me sale 2 SHOWADDELEMENT y están activados
    http://i50.tinypic.com/acwkg6.jpg
    http://i46.tinypic.com/zu5saw.jpg

    y donde esta el copyright. me sale esto
    http://i49.tinypic.com/2cmqfkg.jpg
    me imagino que le debe faltar algún código y no tengo idea cual ni en donde lo pongo

    Hora si muchos éxitos en este 2010

    ResponderEliminar
  50. Vale, efectivamente no tienes ninguna sección para el footer.

    Para crearla, justo antes de la línea div id='footer-wrapper', inserta otra que diga...
    <b:section class='footer-wrapper' id='piepagina'/>

    No sé si la clase footer-wrapper te vendrá bien (su diseño). Si no es así, cambia la palabra footer-wrapper por piepagina y luego crea una nueva clase en la parte CSS con las características que te vengan bien. Un ejemplo:

    #piepagina {
    width:900px;
    margin:0 auto;
    padding:0;
    background:#990000;
    }

    ResponderEliminar
  51. Mil gracias Oloman, al fin tengo otro espacio donde agregar cosas

    ResponderEliminar
  52. Eso quiere decir que lograste hacerlo. Enhorabuena.

    ResponderEliminar
  53. Hola Oloman las columnas esta bien pero el problema es que el texto tiene un color diferente bien es verde o rojo como puedo ponerlas de color negro el texto gracias por la ayuda.

    ResponderEliminar
  54. Yo veo el texto en gris y los enlaces en verde, Christopher. Dime a qué texto te refieres concretamente con un ejemplo.

    ResponderEliminar
  55. muchas gracias por el tutorial, muy completo y facil de entender, llevaba dias buscando una solucion y la encontre aca ;)

    saludos

    ResponderEliminar
  56. Yo he seguido las instrucciones y me aparecen los dos widgets uno debajo del otro, al final del main, pero del ancho del main.
    Les puse en % como en el ejemplo y nada, ocupan todo el ancho.
    Después les puse en tamaño de px, para ver si se ajustaban las cajas a es tamaño, pero tampoco.

    Es decir, no hay forma de que aparezcan en paralelo, uno al lado del otro. Les puse a los dos left, en vez de uno left y el otro right, por ver si se ponían seguidos (una bobada), pero tampoco.
    ¿Qué podrá ser?. Tengo añadidos otra columna de widgets aparte del ancho del main, pero estas nuevas secciones de columna1 y columna2 deberían ser distintas al fijarles distinto ancho, pero no lo cojen. Se extienden al todo el ancho. Le he dado mil vueltas y nada. Las he puesto en el content wrapper y también se extienden todo a lo ancho. ¿Puede hacerse algo?
    Gracias.

    ResponderEliminar
  57. Uf, después de darle vueltas, conseguí que quedaran como se ve en el artículo. Pegando el #columna1 y #columna2 debajo de #main-wrapper, no encima inmediato de SKIN. Pero mi intención era rellenarlas con una foto cada uno los widgets y ponerlas sobre el cuerpo de entradas, un poco estilo magazine, pero al desplazarlas hacia arriba en la página de diseño, se ensanchan y toman el ancho de las entradas, del main-wrapper. O sea, que a lo que se ve, sólo sirven para dejarlas al final de las entradas, ¿No?.

    ResponderEliminar
  58. No. Lo de las secciones debería servir para cualquier parte, pero hay que insertar el código dónde corresponde.

    A ver si tienes un div que se llame crosscol-wrapper. Si es así, coloca el código HTML que se propone, justo detras.

    ResponderEliminar
  59. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  60. disculpa que haya borrado la otra entrada , es que pegue algo que no iba a aqui lo voy a comentar en la seccion de plantillas :

    por otro lado:
    siempre que meto mano a alguna plantilla
    termino aqui xd, muchas gracias por estos post oloman

    saludos

    ResponderEliminar
  61. No problemo. Ya he visto tu otro comentario.
    Saludos.

    ResponderEliminar
  62. Hola Oloman ya eh realizado los pasos que se encuentra en el post y cuando pongo guardar plantilla no me sale la division me sale el sidebar debajo del otro
    La imagen:https://lh5.googleusercontent.com/-l7C_fpIWJs0/Tv3kUctK6QI/AAAAAAAAB9s/sP7ixuRXPds/s640/lololo.png
    Por favor revise si me falta codigos por agregar
    MiBlog
    Gracias espero su ayuda.

    ResponderEliminar
  63. Actualmente veo tres columnas en tu footer Wmasterconsultores ¿Cual era el problema? ¿Demasiado ancho para cada una de las columnas?

    ResponderEliminar
  64. si oloman al parecer es demasiado ancho porque lo quiero tenerlo en dos columnas pero no me sale, que codigo debo de cambiar?
    Saludos

    ResponderEliminar
  65. Acabo de darme cuenta de que usas una plantilla de las del nuevo diseñador Wmasterconsultores y esas son odiosas. Sin embargo, para tu caso puede venir bien porque hay una utilidad en él para cambiar la distribución de columnas. Antes de empezar a trastear la plantilla desde el HTML, prueba desde allí.

    ResponderEliminar
  66. Vaya si es un poco complicada la plantilla pero de la utilidad que me hablas para cambiar la distribucion me la cambia pero no como yo quisiera es agregar dos columans de sidebar bajo los post y no me permite esa funcion.
    Me ayudas Oloman..

    ResponderEliminar
  67. Hola! disculpa y esta parte
    div class='main' id='main-wrapper'
    etc...

    ¿se mete después de que?
    donde pongo eso xD
    Gracias de antemano ;D

    ResponderEliminar
  68. mmm.. ya vi donde iba xD
    pero una preguntota, espero no te moleste u.u
    es que a mi me salen así las columnas por más que trato que se dividan u.u

    http://dl.dropbox.com/u/10199237/Otras/Ashampoo_Snap_2012.01.10_12h19m31s_001_.png

    y quisiera eliminar la columna que sale arriba de las entradas, esa que se ve doble, ¿me puedes ayudar? Por favor, es que no se como hacerle ya que estoy modificando una plantilla ya hecha u.u
    mira este es el blog: http://prueeena.blogspot.com/

    te dejo mi correo: IanKuga@gmail.com

    Te lo agradezco de antemano.

    ResponderEliminar
  69. Wmasterconsultores, no tengo acceso al código que tú pusiste ¿Me lo puedes pegar aquí o colgarlo en algún documento? Prueba antes a cambiar el 48% por un 40% o incluso un 30%. Si ya con eso te aparecen una al lado de la otra, entonces no es necesario, ya sabes dónde está el problema ;)

    xIan_23x, como te pasa lo mismo que a Wmasterconsultores, la respuesta es exactamente la misma. Prueba a cambiar el % y si no te funciona, hazme llegar el código que incluyes.

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
  70. Vaya Oloman gracias ya resolvi mi problema, Saludos

    ResponderEliminar
  71. Ichan
    Hola! Gracias por antenderme :D en verdad te agradezco,
    Hice como me dijiste le puse a las columnas 30% ya que son 3 y el tamaño es de 900 y me funciono perfecto, realmente te agradezco, tienes un excelente blog ;D

    ¡Saludos!

    ResponderEliminar
  72. Discula, te vuelvo a molestar el problema es que estuve editando un plantilla ya hecha, esta: http://www.mediafire.com/?gi18wncv1xo5acd pero la estuve modificando y ahora esta parte no sale >w<) http://dl.dropbox.com/u/10199237/Archivos/Carmen%20Blogger%20template%20-%20BTemplates.png

    se supone que se deben de ver los recuadros, por lo menos 2 filas y en mi caso solo se ve esto:
    http://dl.dropbox.com/u/10199237/Archivos/La%20Yuripedia.png

    ¿me podrías ayudar a resolver este problema?
    en verdad te lo agradecere mucho, mira esta es mi platilla modificada. http://www.mediafire.com/?68rfjxbeg125pjl

    Te dejo mi correo:Iankuga@gmail.com
    En verdad necesito ayuuda >w<)

    ¡Saludos! y de antemano Gracias :D

    ResponderEliminar
    Respuestas
    1. Ichan, en tu captura se ve una fila, pero en tu blog se ven perfectamente tres. En total, 9 posts ¿?

      Eliminar
    2. mm... ya veo, entonces es por que estoy como administrador o algo así supongo u.u
      Muchas gracias por responder xD
      y disculpa por haberte quitado tu tiempo mm..
      si debe ser por que estaba como administrador u.u
      que no se veía mm.. muchas gracias!

      en verdad y ¡Saludos!

      Eliminar
  73. Hola!!! Tengo un problema...en mi blog de buscandolabuenasuerte.blogspot.com.ar quiero agregar una nueva columna a la izquierda pero no sé cómo porque en la plantilla las cosas no están como normalmente las encuentro en otras plantilla. Los tamaños están en porcentajes y no está el content-wrapper o si está, no lo identifico para poder colocarla. Podrías ayudarme?????????? Gracias!

    ResponderEliminar
    Respuestas
    1. Tú referencia es main-wrapper, igual que en este ejemplo. No expandas artilugios y haz lo siguiente...

      Dentro de ese DIV (main-wrapper) tienes actualmente dos SECTION: id="content" y id="sidebar". Sólo tienes que añadir justo antes de la línea que forma CONTENT, otra idéntica a la que forma SIDEBAR, pero cambiando id="sidebar2".

      Luego vas a la parte CSS y cambias el porcentaje de...
      .container_12 .grid_8 {
      width: 64.666%;
      }

      ...que es la columna de los posts. Por ejemplo lo dejas en 50%.

      Por último añades nuevo CSS para la nueva barra con el espacio que has restado menos un pequeño % para que quepan los márgenes:

      #sidebar2 {
      width: 12%;
      display: inline;
      float: left;
      margin-left: 1%;
      margin-right: 1%;
      }

      Eliminar
  74. Hola, me gustaría saber como enmarcar la sidebar, tanto la derecha como la izquierda, no enmarcar los gadgets uno a uno, tengo la plantila watemark de 3 columnas, y como redondear el marco de la sidebar y cambiar el fondo de color. He estado buscando por tu blog pero no lo he encontrado. Me he suscrito a publicaciones por correo por si puedes indicarme como hacerlo. Agradecida. Un abrazo.

    ResponderEliminar
    Respuestas
    1. Si a ambas le quieres aplicar el mismo estilo lo más probable es que con añadir a tu parte CSS propiedades sobre la clase .sidebar, puedas hacerlo. La duda es porque es bastante conocido que le tengo mucha manía a las plantillas del nuevo diseñador.

      Sería algo así:
      .sidebar {
      border:2px solid #black;
      background: #eeeeee;
      }

      A partir de ahí ya pones los colores que gustes u otras propiedades.

      Eliminar
  75. saludos Oloman ... e probado todos los cambios que propones en tu web a mi blog cuando tenia la plantilla anterior .Todas los cambios me salieron a la perfeccion ..incluso habia modificado muchas cosas (con ayuda de otros blogs conocidos ) . el problema es que de apresurado o mas bien distraido ...no hice una copia de seguridad y no puedo volverlo como estaba ... bueno .. e leido atentamente los tres post relacionados al tema y son bastante interesantes lo cual debo sacarme el sombreo por que es los mejores posts explicados en cuanto al tema.. el punto que en plantillas comunes es facil realizar esos cambios
    , por lo tanto quisiera incorporar en una plantilla REALIZADA CON EL EDITOR DE PLANTILLAS ... (que me gusta como quedo y es justo lo que necesitaba) ... La seccion con 4 columnas , en mi caso quiero tres al pie de mi blog para agregar algunos gadget que por defecto no salen en el blog (por la plantilla ) para que se mantengan visible siempre ...
    ¡como lograrlo ? disculpa si lo has explicado y no lo he entendido ...desde ya muchas gracias ...
    www.cosaswap.blogspot.com

    ResponderEliminar
    Respuestas
    1. Pues va a ser que ni te puedo ayudar, ni creo que puedas hacerlo. Una cosa son las plantillas del nuevo diseñador, que permiten desde un editor de plantillas modificar muchas cosas y otra muy distinta son las vistas dinámicas. Esa última es la que tú tienes y prácticamente no se puede modificar nada en ellas.

      Eliminar
    2. gracias ... estuve intentando modificarla pero mis intentos fueron en vano ... por lo tanto opte por otra plantilla mas sencilla ...
      bien ... e visto en este y varios otros blogs arriba de tu post algo como
      estas en >> home >> ejemplo >> nombre
      en alguna de tus entradas explicas esto ???
      esperare tu respuesta ... muchas gracias y por cierto ...
      excelente web ...

      Eliminar
    3. Pues casualmente sí. Sólo busca "breadcrumbs" -que así llaman a eso- en el buscador de la izquierda y encontrarás el artículo.

      Eliminar
  76. muchas gracias ... intentare implementarlo ,... :) saludos ....

    ResponderEliminar
  77. Oloman: Hola, aprovecho la ocasion de agradecer por toda la ayuda que brindas a los novatos y a los no tantos, haces un excelente trabajo, bueno no quiero parecer salamero jejeje... oiga mi buen amigo el motivo de la presente es por el siguiente motivo, mi plantilla no tiene seccion a los pies de la pagina y no entiendo como agregarla, me gustaria volver a tener 2 secciones a los pies para agregar gadget de seguidores y paginas amigas, en las plantillas blogger podia hacer y deshacer pero esta plantilla no es de blogger y me ha dado mucho trabajo modificarla solo me faltan las 2 secciones a los pies, si gustas visitas mi espacio y te daras cuenta que el gadget de seguidores la tengo a la derecha y muy pequeña, antes la tenia a los pies y mas expandida, ojala que puedas ayudarme... ya pedi ayuda en otras paginas pero aun no tengo respuestas. hasta pronto y gracias por tu ayuda.

    ResponderEliminar
    Respuestas
    1. Hola. Tienes que buscar en tu plantilla el div main-wrapper. Justo después de su cierre, tienes que insertar algo así. Fíjate que sea antes del div de apertura del sidebar-wrapper
      <b:section class='pie' id='pie'/>

      Luego tienes que dar estilo a #pie de la misma manera que aquí se explica para columna1 y columna2, con la diferencia de que sólo lo tienes que hacer para una clase y que esta tiene que tener un ancho del 100%.

      Eliminar
  78. Hola Oloman: perdon por no responder antes, oiga mi buen amigo, segui sus pasos y no consegui nada, la verdad que no supe como hacerlo busque div main-wrapper. sertias tan amable de explicarlo detalladamente en un post que sea a pruebas de tontos como yo jejeje, de verdad mi amigo que no supe como hacerlo con la explicacion que me dio... bueno mi amigo te agradezco de corazon tu valiosa ayuda, si haces el post te lo agradece mas, hasta pronto mi buen amigo un abrazo a la distancia, cuidece y vendiciones para ud y familia.

    ResponderEliminar
    Respuestas
    1. No sabría hacerlo de otra manera distinta ni más amplia con respecto a lo publicado en este post. En tu caso concreto es lo que comenté en 79.1. Quizás buscar "div main-wrapper" y no es eso, es el DIV que lleva como clase "main-wrapper".

      Eliminar
  79. Hola Oloman gracias hace poco te escribí por Twiiter para añadir un Bloque a mi plantilla me sirvió este tutorial pero en el explica para colocarlo abajo de las entradas por favor podrías darme la indicación para ubicarlo a los lados preferible a la derecha, Gracias

    ResponderEliminar
    Respuestas
    1. Pasa al "capítulo II" de esta serie de entradas. Allí verás cómo añadir una sección en general. Ahí hay un código referente a una sidebar. Ese es el nombre que recibe esa barra que quieres en un lado.

      Eliminar
  80. mira eso no kiero yo quiero como el tuyo,
    no quiero el gradget debajo sino al costado de las entradas

    ResponderEliminar
    Respuestas
    1. Vale, pero el mecanismo es el mismo. Sólo se trata de dar unas propiedades distintas en la parte CSS. En el anterior comentario mío tienes dónde encontrar esas propiedades.

      Eliminar
  81. Bueno, nada me sale. Tengo el mismo problema que Bucam (comentario 57)y ni siquiera existe main-wrapper en mi plantilla. Los gadgest quedan uno arriba del otro, no responde la medida,ni cambiando el %ni cambiando por px. Tendrá solución? Gracias

    ResponderEliminar
  82. ¿Cómo que "los gadgets quedan uno arriba del otro"? Eso es lo normal ¿no?

    No sé qué quieres hacer, pero este post tiene las referencias de las plantillas clásicas, por eso no coinciden las clases.

    Tú creo que usas una plantilla de las del nuevo diseñador y para esas el diseñador es lo más cómodo. Ahí puedes cambiar el tamaño de las columnas e incluso añadir o quitar bloques.

    ResponderEliminar
  83. Lo intento pero nada, se ve que no estoy poniendolo todo en los sitios adecuados porque no cambia nada en mi vista previa....

    ResponderEliminar
    Respuestas
    1. Hasta que no añadas gadgets a esa zona es como si no existiera. Por eso probablemente no veas cambios desde Vista Previa

      Eliminar
  84. Yo tengo una duda que me corroe vivo jajajaa, puedo crear dos secciones para gadgets justo entre los posts ? me explico mejor: yo lo tengo puesto para que se vean 4 posts en la pagina principal , bien, pues lo que pretendo es que por ejemplo se vean 2 luego poder poner un par de gadgets ( para poner enlaces , entradas populares o lo que sea ) y que luego justo debajo, salgan los posts que queden .. lo he visto en algúnb blog y plantilla, pero la verdad es que prefiero la mía y poder hacer ese truco, por llamarlo asi.

    ResponderEliminar
    Respuestas
    1. Hola. La verdad es que no se me ocurre cómo se podría hacer eso. Quizás se podría incluir algo tras el primer post usando un condicional, pero habría que meterlo en la plantilla directamente, no como sección.

      Eliminar
  85. Lo se, lo se, mayormente porqué mi pregunta está mal planteada,verás e estado viendo durante mucho tiempo plantillas tipo "magazine premium" que contienen los posts en una parte ínfima del main y luego tienen habilitados muchos espacios para feeds con últimos post, más comentados, por etiquetas, etc y da la sensación que esté todo integrado en el main , cuando realmente no es así, de ahí mi equivocación.

    En efecto el condicional ese del que me hablas y si no me equivoco es Firstpost, te da la posibilidad de colocar algo de código debajo del primer post, practicamente lo que quieras , pero lo tienes que parsear , de lo contrario da error continuamente. Que es a lo que al final he recurrido , incluyendole mi galería de favoritos de Youtube con CoolIris.

    Así que muchísimas gracias por contestar y si te apetece echarle un ojo a mi blog ( el cual está aún en pleno ajuste de todo ) la dirección es : www.rosasconcocos.com

    ResponderEliminar
    Respuestas
    1. Sí, era conso con lo que decía, con Firstpost. Y ya vi antes tu blog para hacerme una idea de lo que pretendías, pero no me di cuenta de que eso segundo era una galería externa. Lo vi muy rápido... ;)

      Eliminar
  86. Jajajaja, bueno, no son plantillas y código ( para eso estoy muy verde aún ) , pero también entretiene un poquito ..

    ResponderEliminar
  87. Hola Oloman, te sigo desde hace años y el motivo de que te escriba es porque esto no lo encuentro en ninguna parte, este es mi blog http://www.chistesparadg.com.ar/ y lo que quiero hacer es cambiar el color del fondo de lo que esta al final de la página, el footer, en donde esta '© 2013 ChistesparaDG / Guille GantZer - Terminos Legales - Publicita en ChistesparaDG - Agradecimientos - Contacto' sería en donde quiero cambiar el color del fondo, es el ultimo gadget de la plantilla, espero me entiendas lo que te dije, sos muy grande y me alvaste la vida varias veces, espero tu respuesta o algun link en donde me indique como hacerlo, saludos y un abrazo.

    ResponderEliminar
  88. Buenas campeón. Me gustaría que me ayudaras un poco si puedes....
    Hice la prueba de crear estas secciones dobles y no me sale, las secciones se me crean pero la CSS no me hace ni caso, no afecta el float ni el width a las secciones..
    ¿sabes por que puede ser?¿puede ser por hacerlo en las típicas de blogger?.
    Lo he hecho un montón de veces la css esta coloca en su sitio antes de ]]> he probado mil formas y nada.. espero que puedas ayudarme en algo, me tiene loco.
    Un saludo

    ResponderEliminar
  89. Tengo las secciones creadas con los gadgets dentro tal y como tu comentas en este post y no hace nada de nada...
    Acabo de leer el comentario Nº 84, ¿dices que en diseño se puede crear secciones y editarlas el tamaño, etc? Yo no veo eso...
    Lo que quiero es tener el menu de navegacion del blog en la parte superior..y debajo tener un slide a un lado y el titulo y descripcion al otro lado con sus respectivos float etc.. pero es que no me hace ningun cambio.
    Gracias maestro, ojala puedas decirme algo que me sirva de ayuda, un saludo.

    ResponderEliminar
    Respuestas
    1. Este código es precisamente para las "típicas" (clásicas realmente) de Blogger, así que te debería funcionar. No hay un sitio desde dónde crear secciones "automáticamente" y la única forma es hacerlo como explico aquí, editando la plantilla y construyéndolas a mano.

      Prueba a hacer exactamente lo que explico aquí y comprueba que te funciona. Así te familiarizas con el sistema. Luego ya haces variaciones para conseguir exactamente lo que quieres.

      Eliminar
  90. Una vez más, muchas gracias Oloman.

    Estoy intentando hace mi blog responsive o full 100%.

    El caso es que las listas que tengo pie del blog se me queda a la izquierda y quería centrar ese bloque en el centro.

    Luego tengo debajo de ese listado una tabla, también al 100% pero al disminuir el tamaño del navegador para ver el efecto responsive, se me monta y se me desplaza. Bueno si vas al blog ya te darás cuenta.
    Aparte de eso, cómo lo adapto para que en la web versión móvil se vea mi blog y no el que pone blogger. Es por esto que me gustaría hacerlo responsive.
    Tengo una herramienta o extensión de chrome para testear eso del responsive. Se llama Responsive Web Design Tester. Es muy útil pero yo me pego cada rebote porque no me sale...

    http://www.tejiendolosvientosalisios.com/

    Espero que mi duda también ayude a otros.

    Saludos y muchas gracias.

    ResponderEliminar
  91. Hola Libertad
    Hacer una plantilla responsive es fácil pero sólo si la estructura del blog está previamente preparada para ello. Luego sólo es cuestión de echar mano de la llamadas media queries css.

    Para empezar, un diseño fácil es haciendo las columnas en porcentaje, pero a partir de determinada resolución (ancho de pantalla), la barra lateral conviene que deje de flotar y que se ponga debajo del cuerpo principal del blog. Eso por ejemplo no lo tienes.

    Con lo de las listas que dices pasa algo parecido. Tú tienes esa parte en una tabla y eso no es lo más adecuado para un diseño adaptable, aunque puedes probar con lo que explico en este artículo.

    También hacer pruebas con esta plantilla y luego adaptarla a tu estética.

    No puedo ser más concreto porque en tu caso no se trata de una cosa puntual, sino de reconstruir casi todo el blog, pero con los enlaces que te he pasado ya tienes para empezar a ver como va todo eso. Si pudiera explicar como hacer una plantilla de esas características, de principio a fin, ya lo habría hecho...

    ResponderEliminar
  92. Muchas gracias Oloman. Tengo un blog de pruebas en las que practico todos los tutoriales. Haré lo que me dices. Empiezo desde el pricinpio y ya doré noticias de como me va.

    Saludos.

    ResponderEliminar
  93. Hola Oloman.

    Otra vez estoy por aquí planteándote una nueva cuestión.
    Me gustaría saber si esto se puede hacer en blogger.

    http://shaybocks.co/foodiepro/ Esta es la página original.

    http://mysaffronkitchen.net/ Y esta otra es la personalizada. Lo que me gustaría es sustituir el slider por el último post, es decir, el más reciente.
    El resto en dos columnas. Luego debajo de éstas poner las entradas por categorías.

    Yo tengo una página en el blog que hace de índice. ¿Se podría hacer cómo en este caso? La sección en el blog de ejemplo se llama Recipe.

    Muchas gracias por tu apoyo. Espero que la respuesta sea sí.

    Un abrazo.

    ResponderEliminar
    Respuestas
    1. Hola. Sí que se puede, pero ¿dónde quieres hacer eso? Todo este tipo de cosas depende de la estructura y el estilo de cada plantilla.

      ¿Y con el índice qué quieres hacer?

      Eliminar
  94. hola! cuando realizo cualquier cambio en la plantilla html de mi blog, lo widgets que coloco en las secciones creadas, me desaparecen. Esto le pasa a alguien más? tiene solucion?

    ResponderEliminar
    Respuestas
    1. Hola Sebas. No entiendo muy bien lo que te ocurre pero según me parece el problema es que cuando haces algún cambio en la plantilla del blog, los widgets te desaparecen. Sobre eso lo único que ese me ocurre porque a mí también me pasa con frecuencia, es que tengas abierta una ventana con gadgets y otra con plantilla. Ahora mismo el contenido de los gadgets está también en plantilla y por tanto, cuando actualizas unos también se cambia la otra. Es decir, si cambias un gadget la plantilla cambia y si en la plantilla cambias un gadget, evidentemente este cambia también como gadget.
      Si tienes dos ventanas abiertas en el navegador, una con cada cosa, la última que actualizas es la que prevalece. Si es la plantilla, el gadget que pudiste crear justo antes desde Diseño, desaparece.

      Eliminar
  95. Hola, Oloman. Gracias por compartir esto.
    Una duda: cómo se añade un widget a lo ancho del blog (como el que tienes abajo de los dos que explicas en el post)? Leí el comentario 79.1, el más cercano a lo que busco pero no encuentro en la plantilla "main - wrapper", sólo aparecen varios main y wrapper.

    Gracias.
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Miguel. Si bien las plantillas estándar de Blogger, mantienen casi todas los mismos nombres de selectores para los mismos bloques, las plantillas personalizadas pueden llevar cualquiera ¿cuál es tu blog que eche un vistazo?

      Eliminar
    2. Ah, he editado mi plantilla, aunque es nativa de blogger. Te pongo el que uso de pruebas. Perdón porque no es el tema pero en ese mismo puse el tiempo de lectura de los post que te pregunté en dicho tema. Es este blog:

      http://werplantillas.blogspot.mx

      Eliminar
    3. Tu plantilla es nativa de Blogger, pero de las del "Nuevo Diseñador". En tu caso tienes ya varios footer. Uno de ancho completo (footer-1) y otro dividio en tres columnas (footer-3). Dependiendo de dónde quieras exactamente ponerlo tendrás que buscar esos nombres como referencias y la nueva sección ya iría antes o después de una de esas.

      Eliminar
  96. Hola Oloman,
    Tanto tiempo!
    Vengo con un problema vinculado a lo que explicas en esta entrada. Tengo una columna para mostrar entradas y otra que es la sidebar. Desde que edité el diseño de las entradas (siguiendo los pasos indicados aca: http://loseasi.blogspot.com.ar/2011/05/agregar-una-id-unica-cada-post-o.html) que no logro que la sidebar quede flotando a la derecha. Fijate que cuando entras al blog en la página principal la sidebar queda abajo del bloque de entradas (cuando debería quedar a la derecha); mientras que si entras a una entrada en particular (cualquiera) la sidebar si se muestra a la derecha correctamente. Que podrá ser? hace 2 horas que peleo con los estilos y no encuentro solución. El blog mio es este: http://www.recontragolazo.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola. Veo que a pesar del tiempo transcurrido, sigues teniendo el mismo problema. Por lo que vi, debes haber puesto algún DIV de más o de menos cuando incorporaste el código ese que comentas y ese error ha estropeado la estructura de la plantilla, precisamente en portada.

      El problema es que eso ocurre en unas páginas sí y otras no, porque se usaron condiciones y estas no son visibles desde aquí afuera. Por tanto no te puedo decir en concreto qué tienes que modificar.

      Siguiendo el tutorial al contrario, intenta quitar lo que pusiste. Si no funciona espero que tengas una copia de seguridad (que deberías) porque esa será la forma más rápida de arreglarlo todo: volver a tu última versión de plantilla funcional.

      Eliminar
  97. Hola Oloman, muchas gracias por el tutorial!! lo segui y perfecto!. pero tengo un problema. que al momento de verse en el movil las columnas no me salen responsive. existe este mismo tutorial pero que el gadget se adapte al movil sin necesidad de ponerlo con la plantilla de blogger movil que trae por defecto?

    ResponderEliminar
  98. Estamos en 2023 y me re funcionó tu post. Gracias y saludos desde Argentina

    ResponderEliminar