Cómo poner tres columnas debajo del header (crosscol)


Si buscas cómo poner tres columnas debajo del header en tu blogger, más concretamente en la sección llamada crosscol, ahora os explico cómo hacerlo gracias a Rosa.

1) Vamos a Diseño->Edición de HTML->Buscamos <b:section class='crosscol' id='crosscol' showaddelement='no'/> (tecleamos Ctrl + F para buscar más rápido) Nos aparecerá a su lado todo esto:



<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>



2)
Sustituimos todo este último código por:


<div id='crosscol-wrapper' style='text-align:center'>
<div style='clear:both;'/>
<div id='crosscol-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='crosscol' id='crosscol-bottom' preferred='yes'>
<b:widget id='Text3' locked='false' title='' type='Text'/>
</b:section>
</div>
       <div id='crosscol-columna-contenedor'>
<div id='crosscol2' style='width: 30%; float: left; margin:0; text-align: center;'>
<b:section class='crosscol-column' id='crol1' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol3' style='width: 40%; float: left; margin:0; text-align: center;'>
<b:section class='crosscol-column' id='crol2' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol4' style='width: 30%; float: right; margin:0; text-align: center;'>
<b:section class='crosscol-column' id='crol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
      </div>


3)
Ahora buscamos ]]></b:skin> y antes pegaremos el siguiente código:


#crol1{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}

#crol2{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}

#crol3{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}

#crosscol-columna-contenedor {
clear:both;
}
.crosscol-columna {
padding: 10px;
}



Clicamos en vista previa y si todo está bien, guarda la plantilla. Ahora tendrás que ir a Diseño->Elementos de página y te encontrarás con algo así:





Si quieres modificar los bordes tendrás que modificar en el paso 3) lo siguiente border: 1px solid #60A9D1;
si cambias el 1px por 0px le estarás eliminando los bordes. Para modificar el color de fondo de las tres columnas debes situarte de nuevo en el código del paso 3) y modificar en donde pone background:#fff;



Hay que destacar que la sección crosscol puede no estar en todas las plantillas. Si tu plantilla no tiene la sección crosscol, deberías saltarte el paso 1), colocar el código del paso 2) antes de <div id='main-wrapper'> y el paso 3) realizarlo tal cual.





¿Te interesa añadir tres columnas en el pie de página (footer) de tu blog?


19 comentarios:

  1. A ver como te explico lo que pretendo hacer.
    Quiero poner dos cabeceras, una a la izquierda as grande con una imagen y otra a la derecha mas pequeña con el titulo y la descripcion. Y debajo quiero mantener dos que ya tengo que ocupan todo el ancho. Lo de desdoblar la cabecera lo sabría hacer modificando el html que pones, pero lo de mantener las otras dos ya me parece un poco mas complicado. ¿Se puede hacer?

    ResponderEliminar
  2. ¿Lo que quieres es como lo tengo yo? ¿En una parte el logo y en otra el buscador?

    En cuanto pueda creo una entrada sobre ello, ya que hay más compañeros que me lo han solicitado. A ver si entra mañana y pasado puedo.

    Saludos.

    ResponderEliminar
  3. Con esto que pones quedaria como lo tienes tu?
    Me explico:
    1 columna a la izquierda,los textos en el medio y otra columna a la derecha? o las 3 columnas son para gadgets?

    ResponderEliminar
  4. Vale ya lo hice y vi q es para poner e bloques de gadget

    hay alguna forma sencilla de crear otra sidebar a la izquierda sin q se borre todo lo que ya habia en el blog?

    ResponderEliminar
  5. Hola David. Bienvenido al blog. He visitado tu blog y he visto que tienes 3 columnas tal y como lo tengo yo. Esta entrada hace referencia a poner tres pequeñas columnas debajo del header (cabecera). Fíjate en la imagen que puse de ejemplo.

    Saludos, gracias por comentar.

    ResponderEliminar
  6. Un pregunte
    sin en vez de 3 quiero solo 2,la izquierda mas grande q la derecha q tendria q modificar?
    Es q estaba pensando sustiruir la cabecera por un gadget para poder poner una imagen q me gusta y me gustaria q tuviera al lado un gadget para poder poner unas imagenes tipo slide

    Probe lo de dividir la cabecera pero no me funciona y pense q si elimino la cabecera y meto arriba 2 gadgets me quedaria bien tambien

    saludos

    ResponderEliminar
  7. Pues si sólo quieres dos fíjate en los códigos y elimina las partes sobrantes. Es decir, en el código del paso 2) deberás quitar

    <div id='crosscol4' style='width: 30%; float: right; margin:0; text-align: center;'>
    <b:section class='crosscol-column' id='crol3' preferred='yes' style='float:right;'/>
    </div>

    Un saludo

    ResponderEliminar
  8. Y PARA PONERLAS ABAJO COMO EN TU BLOG COMO SE HACE¿ GRACIAS ANTICIPADAS

    ResponderEliminar
  9. Hola. Por favor, no escribas en mayúsculas. En internet significa que estás enfadado o gritando. Revisa las normas a la hora de comentar.

    Para poner tres columnas abajo del blog se hace visitando esta entrada: http://www.quierocrearunblog.com/2009/08/poner-3-columnas-pie-de-pagina-footer.html

    Un saludo y bienvenido al blog.

    ResponderEliminar
  10. hola! hice cada uno de los pasos pare crear otras columnas (gracias!!) y se ve muy bien, pero... el unico problema es el tamaño de las letras (se ven enormes) estan mas grandes de lo que quisiera, no se si pudieras decirme que hice mal.

    Bye

    ResponderEliminar
  11. Hola. Yo lo veo correctamente en tu blog. ¿Ya lo solucionaste? Disculpa el retraso, estuve de exámenes.

    Un saludo.

    ResponderEliminar
  12. no puedo poner mi imagen en la cabecera de mi blog en vez del nombre y descripcion puedes decirme a ke se debe? muchas gracias!

    ResponderEliminar
  13. Creo que logre solucionar mi problema. No quedó como en principio necesitaba pero logre poner 3 columnas en la seccion del crosscol.
    Ahora bien, aqui radica el problema de la plantilla Minima: No posee Seccion Crosscol.
    Al comienzo del tutorial agradeces a Rosa por enseñartelo. Fui al Blog de Rosa y me di cuenta de eso.Gracias de todas maneras!Tu Blog sale antes en Google que el de Rosa y por cierto esta demasiado completo. Sigue adelante!

    ResponderEliminar
  14. Hace tiempo que buscaba algo así, sólo un detalle ¿Es posible cambiar el tamaño del texto? Quiero que sea algo más pequeño que el de los post, ya que me sale a igual tamaño ¿es posible?

    Saludos.

    ResponderEliminar
  15. hola no eh podido encontralo pero de todo modo gracias por los porte que haces si de seas puede pasar por mi blog aver que consejo me das

    http://tecnologicard.blogspot.com/

    ResponderEliminar
  16. hola yo quiro poner dos abajo pero de mis entradas del blog , no quiero que aperesca abajo de las entradas y del sidebar
    solo de las entras y que sean dos
    porfavor
    algun consejo porfas

    ResponderEliminar
  17. Hola como estas, hermano en mi caso la plantilla que utilizo es una propia de blogger y no me aparcece ninguna de esos dos codigo html, es decir no tengo la del punto 1 y tampoco el del caso div id='main-wrapper' como podria hacer para colocar esas 3 clumnas? sino tengo ninguno de esos dos codigos? mi pagina es: http://comoganardinerosinsalir.blogspot.com/

    ResponderEliminar
  18. busco el codigo iicial,pero no lo encuentro.algo hagomal verdad.Me interesa poner dos o tres gadgets para los anuncios pero no hay forma.me puedes ayudar?
    gracias anticipadas

    ResponderEliminar
  19. no entendi la parte del antes antes de que!? antes de buscarlo??

    ResponderEliminar