Viajar por Europa

noviembre 16, 2010

Dividir cabecera blogger II

He encontrado algo que estaba buscando hace tiempo ¿como dividir la cabecera de un blogger en las nuevas plantillas?

Podemos adornar o incluir un widget en la cabecera y hacer un montaje dandole al blog mayor vistosidad.
Asi tendremos a un lado el título del blog y a la derecha un adorno, enlace, imagen, lo que quieras.


[1] Colocamos unas líneas en el CSS de la plantilla, y en este caso tenemos que localizar Header, exactamente esta línea:
/* Header ------------------------------ */
Y justo a continuación añadir:
.header { width:50%; float: left; margin:0 auto 2% ; } .header2 {width:50%; float: right; margin:0 auto 2%; }

Al dividir la cabecera de blogger puedes seleccionar la dimensión de cada una de las partes según te interese.Vemos un 50% de distribución del titulo y del widget que se crea, puedes cambiarlo por 70% y 30%, o bien otros porcentajes.

[2] Buscamos en la plantilla HTML y localizamos la siguiente linea: (Ya sabes CTRL+F)


<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>


</div>

Añadimos  justo antes de "div" lo que muestro destacado en negrita, en total queda:

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>


</b:section>


<b:section class='header2' id='header2' showaddelement='yes'/>

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



</div>


Ahora bien si en la parte [2] tienes algun problema, esta es otra plantilla HTML que no coincide con lo indicado anteriormente. Esto puede suceder porque ya has puesto el titulo del blog. Entonces te doy unas pistas para que puedas localizar donde pones el codigo (rojo). Dado que previamente pruebo todos los trucos he observado que el punto [2] no se corresponde en algun caso.


<!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
</b:widget>
</b:section>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>
    </div>


FUENTE: El escaparate de Rosa.

1 comentario:

  1. Anduve buscando por todos lados esto, siempre me aparecía un error y mi código no aparecía igual, hasta que por fin aqui encontré la parte "alternativa" de donde poner el código.

    Gracias y saludos.

    ResponderEliminar

Si haces un comentario procura que no sea anónimo y si estás solicitando algo al menos espero que votes en Google Plus. Saludos.