Header Ads

Breaking News
recent

EN BLOGGER: DOS SECCIONES DEBAJO DE LA CABECERA

CÓMO HACERLO?
 Ahora bien, todos tenemos la cabecera de blosgpot que, por defecto hay una sola aplicación para poner. Pero se abre un nuevo horizonte, una solución y ubicaremos la segunda columna y nada más que tenemos que jugar con los tamaños.

 En el caso de éste sitio vemos lo siguiente, que debajo de la cabecera y descripción aparecen dos anuncios de google adsense. Es más que razonable que se logró la partición.

SE LOGRA DE LA SIGUIENTE FORMA PARA OBTENERLO TAL COMO LO INDICA LA IMAGEN

 Claro que pondrás un botón pequeño o lo que decidas, no necesariamente anuncios de Google.

Ve a Plantilla ►Editar HTML, y haz click dentro del editor, cuidando no mover nada, luego con la ayuda de Ctrl F (pulsa las teclas: Ctrl + F al mismo tiempo) encuentra:  </header> , inmediatamente después coloca el siguiente código:

<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.

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;
}
 Guarda por supuesto y cuando termines haces las pruebas finales retocando los valores arriba expresados mientras observas en la pantalla el resultado preliminar.
Con la tecnología de Blogger.