Crear dos secciones nuevas debajo de la cabecera del blog en las nuevas plantillas

Un chico me platicaba que quería agregar dos secciones debajo de la cabecera de su blog, ya que quería colocar un banner de AdSense en un lado y otro banner x en el otro.



Existe una sección en la plantilla llamada  crosscol-wrapper, que está debajo del header-wrapper (envoltura de la cabecera) y generalmente es usada para poner ahí los títulos de las páginas estáticas, entonces, por esa razón, dividir el crosscol-wrapper pudiera no resultar muy buena opción, ya que limitaríamos el espacio para los títulos de las páginas estáticas.



Entonces, ¿cómo lo hacemos? Muy sencillo, agregando dos nuevas secciones.



Cómo hacerlo paso a paso.



Paso 1. Ve a Diseño►Edición de HTML, y con la ayuda de Ctrl F encuentra  </header> , inmediatamente después coloca el siguiente código:

<div id='contenedor'>

  <div id='conte-left' style='width:49%; float:left;'>

   <b:section class='secc1' id='secc1' preferred='yes' showaddelement='yes'>

    </b:section>

    </div>

<div id='conte-right' style='width:49%; float:right;'>

    <b:section class='secc2' id='secc2' preferred='yes' showaddelement='yes'>

  </b:section>

 </div><div style='clear: both'/>

   </div>

Con el código anterior, estamos creando un nuevo contenedor, y ahí dentro estamos colocando las dos secciones, una a la derecha (conte-right), y otra a la izquierda (conte-left). Lo nombré contenedor para que se reconozca fácilmente, puede ser llamada de otro modo como crosscol-wrapper1 por ejemplo.



Como puedes ver, cada sección ocupa el 49% del espacio disponible, pueden cambiar esos valores para mostrar una más larga que la otra 69%/ 29%, etc. todo dependerá de como ustedes prefieran sus secciones.



Paso 2. Guarda los cambios.





Paso 3. Ve a la pestaña Diseño, y agrega los banners, (de AdSense,  etc.) en las nuevas secciones que se han creado y guarda los cambios.


Paso 4.  Ve a Diseño►Diseñador de plantillas►Avanzado►Añadir CSS y luego agrega ahí el siguiente CSS, que servirá para definir margenes, evitar que se desborde el contenido de la secciones, etc.

#contenedor {

width: 920px; /*este es el ancho del contenedor*/

height: 80px; /*este es el alto del contenedor */

margin: 8px auto 10px; /* 8px margen de arriba, auto para izq. y dcha. y 10px abajo*/

padding: 0;

overflow: hidden;

}





#conte-left, #conte-right {

margin: 0;

padding: 0;

}

Ahí mismo, se pueden ver los resultados del CSS que estás agregando.

Paso 5. Una vez que logres los resultados que buscas, guardas los cambios en APLICAR AL BLOG.




Notas finales

• Tendrás que editar el ancho del contenedor, tomando en cuenta el ancho de la plantilla,  que pueden ver ahí en el diseñador de plantillas en Ancho del Blog completo,  este, no debe ser más ancho que el ancho del blog completo; también puedes cambiar el alto.


• Debes tener en cuenta que los banners no deben de ser más grandes que el contenedor, si no, no se verán completos.

Hasta la próxima ;)