¿Cómo dividir el Header o Cabecera del Blog?



El Header o Cabecera del blog es el espacio superior  de nuestro blog, donde esta el nombre o el logo, por defecto en Blogger ocupa todo el ancho del de este, es un espacio que queda desperdiciado cuando nuestro logo es pequeño o no usa el total de la cabecera. Luego dividirlo ustedes dispondrán de ese "espacio" para poner un menú, una imagen, botones de redes sociales, un simple texto, un bloque de anuncios o lo que ustedes deseen

Antes de hacer los cambios en nuestra plantilla del blog vamos a respaldar la plantilla entera. Para los que no saben o no recuerdan como hacerlo vean esta entrada.

  1. Entra en Diseño | Edición de HTML y SIN expandir los artilugios nos situamos en la plantilla y precionamos simultaneamente Ctrl + F, aparecera un buscador en el buscamos lo siguiente:
<header>

Debemos borrar desde <header> hasta </header>, el cual se encuentra unas lineas mas abajo.
En su lugar pegamos el siguiente código:

<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left' style='float:left; width: 45%;'>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='La Luz de Libélula (Cabecera)' type='Header'></b:widget>
</b:section>
</div>
</div>
<div class='fauxborder-right header-fauxborder-right' style='float:right; width: 53%;'>
<b:section class='banner' id='banner' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML188' locked='false' title='' type='HTML'></b:widget>
</b:section>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>
<div style='clear: both'/>
<div class='laluzdelibelula' style='width: 98%; margin: 10px 3px;'>
<b:section class='banner2' id='banner2' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML189' locked='false' title='' type='HTML'></b:widget>
</b:section>
</div>
<div style='clear: both'/>


NOTA: No se preocupen por el nombre de la cabecera, este se cambiara solo.

Guarda los cambios y listo. Ahora puedes ir a Diseño | Elementos de la página y ya podrás ver la cabecera dividida en dos partes.


  • Ahora agregaremos el estilo. Entra en Diseño | Personalizar >Diseñador de plantillas > Avanzado>Añadir CSS y allí pegaremos este código:


/* CSS Header dividido */

.header-inner{
float: left; width: 50%;
margin: 6px;
}

.header-fauxborder-right{
float: right;
width: 46%; height: auto;
margin: 6px 6px;
}

.banner{
margin: 10px 3px 5px 3px;
}



Para ajustar el ancho de el header y del otro widget debemos tener en cuenta lo siguiente:

<div class='fauxborder-left header-fauxborder-left' style='float:left; width: 45%;'>
<div class='fauxborder-right header-fauxborder-right' style='float:right; width: 53%;'>

Los valores en rojo corresponden al ancho de los espacios que generamos. Tengan en cuenta mantenerlos en menos de 98% en la suma total para no superponerlos.


5 comentarios:

  1. Muy bueno muchas gracias me dio resultado

    ResponderEliminar
  2. Muchas Gracias había buscado otros métodos y ninguno servía
    PERO ESTE resulto excelente!!!!!!!!!!!!!!

    ResponderEliminar
  3. hola me interesa hacer todo lo contrario, mi plantilla tiene 2 columnas en la cabecera y quiero que solo quede 1, desde ya gracias

    ResponderEliminar

✭¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥