Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Colocar 3 columnas bajo la cabecera 【header】 - Crosscol



ESTA PUBLICACIÓN HA SIDO CERRADA, PASE POR FAVOR A LA ACTUALIZACIÓN DE ESTA → {X}


Si deseas colocar 3 columnas debajo de la cabecera, osea la sección crosscol, sigue los siguientes pasos.

Descarga una copia de tu plantilla, sólo por precaución.

PRIMERO: Vamos a 'Diseño → Plantilla → Edición de HTML → Continuar' y buscamos (Ctrl + F):
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
Nos aparecerá esto:

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



SEGUNDO: Sustituimos todo el código en color rosado 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>


TERCERO: Ahora buscamos: ]]></b:skin> y antes de este 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;
}



Le damos clic en 'Vista previa' y, si abre sin problemas le damos clic a 'Guarda plantilla'.

CUARTO Y ULTIMO: Vamos a 'Diseño' y listo! Se han agregado 3 columnas nuevas debajo del header.

Nota:

- Para modificar el color del fondo solo debemos sustituir el códígo '#fff' de background:#fff; por otro código HTML. #fff ó #ffffff es color blanco.

- Para modificr los bordes, dos cosas. Primero, si no quieres los bordes sustituyes el código '1px' de border: 1px solid #60A9D1por '0'. Segundo, si lo que gustas es quedarte con los bordes y solo cambiarles el color; cambia el código '#60A9D1' de border: 1px solid #60A9D1por otro.

- Una última cosa MUY IMPORTANTE! No todas las plantillas poseen el código crosscol, si la tuya es una de ellas has lo siguiente. Olvida el paso (1) e iniciemos por el (2), copia el código del SEGUNDO paso y pégalo antes de <div id='main-wrapper'> Y seguimos con el proceso, TERCERO Y CUARTO paso.

Es todo \(・`(ェ)・)/  muy fácil ¿Verdad?
Cualquier duda házmela saber. Espero que les sirva.

*Créditos de tutorial: El escaparate de Rosa

2 comentarios:

  1. No me sale ninguno de los dos codigos .________.

    ResponderEliminar
    Respuestas
    1. Como que no te sale ninguno? Explica que mi nu entender :3

      Eliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.