12 de abril de 2014

Dividir en dos el Header del blog 1

Para dividir la cabecera (header) de la plantilla en dos:
dividir el header del blog en 2

A - Buscar el siguiente fragmento de código en la el HTML de la plantilla:
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' Titulo del Blog (Cabecera)' type='Header'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>

B - Reemplazarlo por:

<div class='fauxborder-left header-fauxborder-left'>
<div class='region-inner header-inner' style='width:49%; float:left'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Titulo del Blog (Cabecera)' type='Header'/>
</b:section></div>
<div class='fauxborder-right header-fauxborder-right' style='width:49%;float:right;height: auto;'>
<b:section class='banner' id='banner' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>
<div style='clear:both;'/>

C - Dar a vista previa si esta todo bien guardar los cambios.
D - Ahora ir a Diseño y se vera la cabecera ya dividida:
dividir el header del blog en 2


E - Para configurar el tamaño y dependiendo del ancho de la distribución (yo usé 990px​​) será necesario ajustar la posición del banner.
Ir a Diseñador de plantillas  Avanzado  Añadir CSS



Pegar el siguiente código:

#banner {margin: 20px 20px 0px 0px;}


F - Aplicar al blog.


Ir cambiando los valores de margen hasta lograr la posición deseada.





No hay comentarios:

Publicar un comentario

Diseño por Blogger Sin Escalones Con la tecnología de Blogger.