Decora tu blog: Plantilla MINIMA de 4 columnas

Plantilla MINIMA de 4 columnas


(Pinchad en las imágenes para verlas más grandes)

Lo primero que haremos será una copia de la plantilla que tenemos para prevenir accidentes. Para ello vamos a la pestaña de edición de HTML y descargamos la plantilla completa. Una vez guardada la plantilla, vamos a la pestaña de "Seleccionar plantilla nueva".



2. En esta pestaña, seleccionamos la plantilla MINIMA y apretamos en "Guardar Plantilla".



3. Volvemos a la pestaña de "Edición de HTML" y comenzaremos a modificar el código para obtener las 4 columnas.

En el código buscamos la parte del "Header-wrapper" y cambiamos el valor del ancho a 990px.


4. Después buscamos la parte del código del "Outer-Wrapper" y allí cambiamos los dos valores que vemos en la imagen.


5. En el bloque del "Main-wrapper" cambiamos a estos valores:


6. Ahora copiamos todo el código del "Sidebar-wrapper", como veis en la imagen:


7. Y lo pegamos dos veces justo a continuación. Esto es lo que serán nuestras tres columnas laterales.

8. Ahora las tenemos que personalizar dándole a cada una de ellas sus atributos. Para ello tendréis que modificar los códigos tal y como veis en la imagen.

Nota: Este paso es muy importante pues si hay el más mínimo error en algún signo os dará error. He puesto los nombres de las columnas en español para que sea más facil.


9. Avanzad hasta casi el final del código y buscad la parte que he resaltado en la imagen del "Main-wrapper".
Vamos a colocar el código de la columna principal (donde se publican las entradas) justo a continuación del código de la "Sidebar-wrapper".

Nota: Si tenéis instalados gadgets, el código de la "Sidebar-wrapper" será más largo que el que veis en la imágen. Esto es porque yo no tengo ningún gadget instalado todavía, así que no os preocupéis por eso. Guiaros por el texto que hay justo debajo que está entre exclamaciones () para saber dónde termina el código de la "Sidebar-wrapper" y dónde tenéis que pegar el que acabamos de cortar (de la Main-wrapper).


En la siguiente imágen veis como queda después de pegado. El de la Sidebar-wrapper justo encima del de la Main-wrapper.


10. Ahora tendremos que cambiar el nombre a la Sidebar-wrapper y ponerle el que le dimos antes a una de las columnas. Fijaros en la imagen de abajo:



11. Como tenemos dos columnas más, necesitamos añadir dos códigos más. Para ello tan sólo tendréis que copiar el código que os escribo a continuación, y pegadlo justo después del "Main-wrapper". Esto hará que estas dos columnas vayan aparezcan después de la columna principal. Esto es, tendremos el formato del blog, de izquierda a derecha, como veis en la imagen que abre esta entrada.

<div id='lateral-derecho-izquierda'>

<b:section class='sidebar' id='sidebar2' preferred='yes'/>

</div>


<div id='lateral-derecho-derecha'>

<b:section class='sidebar' id='sidebar3' preferred='yes'/>

</div>




Una vez llegamos aquí, solo tenemos que guardar plantilla e ir a la pestaña de "Elementos de página" para reorganizar los gadgets que teníamos y/o añadir nuevos.

Si por alguna cuestión os da error, para volver a dejar el código como lo teníais antes de empezar, lo que hacéis es cargar la plantilla que guardamos al principio y listo. El blog volverá a estar como estaba antes de empezar con este tutorial.

18 comentarios:

  1. Muchas gracias, me gustan mucho tus tutoriales, son muy claritos...... gracias a ello, me he atrevido a jugar con la plantilla minima de bloger... Y me he hecho un blog, solo para mis prácticas..... Lo puse de tres columnas con mucho mas ancho.... aqui te dejo el link,para que le eches una miradita:


    http://experimentando-con-blogger.blogspot.com/

    y me dices que opinas..... Ahora lo que tengo que averiguar es un fondo liso, sin la columna de enmedio.........GRACIAS POR TODOS TUS ESFUERZOS,

    ResponderEliminar
  2. No lo puedo hacer!Me pone que no cumple con las especificaciones de lenguaje de Bloguer.
    Voy a intentar la de tres columnas!
    Besos

    ResponderEliminar
  3. gracias a este blog pude conseguir este aspecto para el mio genial!
    http://ramm-almaheavy.blogspot.com

    ResponderEliminar
  4. hola!!yo nuevamente para agradecerte,tenia puesto en mi blog solo la minima,queria la de tres columnas y gracias a vos lo consegui!Aunque tengo tus plantillas,nunca me habia arriesgado a pasarme a tres columnas,despues otra vez intentare la de 4,seguro soy yo!Estoy mas que conforme con la de tres columnas!MUCHISIMAS GRACIAS!

    ALE

    ResponderEliminar
  5. muy padre todos tus datos gracias , pero lo he intentado y no meda mucha razon tines al decir ke con cuidadi jeje :(

    ResponderEliminar
  6. GRACIAS, GRACIAS, GRACIAS, como con la de tres no conseguí cambiarlo pues a cabezona no me gana nadie, me pase a la de 4 y si que lo conseguí

    ResponderEliminar
  7. Grazie mille per gli sfondi bellissimi!!

    ResponderEliminar
  8. GRACIAS DE VERDA,HAS CONSEGUIDO ALGO QUE JAMAS CREI QUE PUDIERA HACER AUNQUE SIEMPRE DESEE,GRACIAS DE VERDAD.MI BLOG ES:HEAVYMETALTRIBUTO POR SI ALGUNO QUIERE VERLO

    ResponderEliminar
  9. me he reido muhco con el resultado, xq 2 columnas me quedaron x arriba de las entradas... y eso q creo haber prestado atencion :P

    ResponderEliminar
  10. ya! a la segunda salio bien !!! gracias!!!

    ResponderEliminar
  11. muchiisiimaas graaciias! me ayuastee un monton! aamee el blog! ya soi tu seguidora :)

    ResponderEliminar
  12. Tu blog es maravilloso!!
    Muchas gracias de todo corazón por que gracias a tu he podido diseñar mi blog...
    Gracias, gracias y mil gracias más!!
    Tus fondos son hermosos y esto de las 3 y 4 columnas fue una gran idea!!
    Blogs como el tuyo son los que ayudan a blogs como el mio a que se vean mejor!!
    BeSoS!!
    °°¡¡MaGe!!°°

    ResponderEliminar
  13. Muy buenos los tutoriales, gracias por publicarlos pero me parece que lo mas sensato es hacer lo que Lebasi Aneres que ce creó un blog para "experimentar" y una vez conseguido el propósito llevarlo a cabo en el suyo, yo particularmente si pierdo lo que he publicado me puede dar algo, le he puesto mucho afán y cariño como para perderlo, así que mañana mismo me pongo manos a la obra, eso si, en un blog nuevo que crearé para los inventos.
    Saludos a todos.

    ResponderEliminar
  14. ¡¡Gracias!!! por fin encuentro un buen tutorial para bestiunas como yo, ja,ja,ja. Logré cambiar mi plantilla mínima a una de cuatro columnas!!!!! realmente sos muy generoza al compartir con nosotros todo lo que sabés!!! un beso grande!!

    ResponderEliminar
  15. gracias!!!!!!!!!!11 www.psnews151.blogspot.com

    ResponderEliminar
  16. Excelente, es complicado pero las instrucciones son claras y precisas, lo voy a intentar, dicen que no hay peor lucha que la que no se hace y esta idea me parece perfecta para mi.

    Gracias.

    ResponderEliminar
  17. hola! mi gusta mucho su blog! parabéns!

    ResponderEliminar