20 de out de 2009

Como dividir o cabeçalho do Blogger

Para dividir o cabeçalho do Blogger, vá até o HTML de seu blog e procure pelo seguinte trecho:

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}



Substitua por este código abaixo.

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:980px;
height: 300px;
margin:0 auto 10px;
}
#header {

height: 300px;
margin: 35px 0 0 0;
text-align: left;
float:left;
width:56%;
color:#E2DBD4;
}
#header-right{
margin: 10px 0 0 0;
padding: 30px 0 0 10px;
text-align: left;
float:right;
width:40%;
color:$pagetitlecolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header h1 {
font-size: 35px;
margin:55px 0 5px 0;
padding:45px 0 0 20px;
line-height:1.2em;
letter-spacing:.2em;
font: #907095;
color: #907095;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
letter-spacing:.2em;
line-height: 1.4em;
font-size: 25px;
font-family:'Tangerine', arial, serif;
text-shadow: 0px 2px 2px #000;
color: #E2DBD4;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}




Código em azul representa o tamanho total de seu cabeçalho

código em laranja,  largura


 Agora procure pelo seguinte código:

 <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='5' showaddelement='no'>
<b:widget id='Header1' locked='true' title='AQUI DEVERÁ ESTAR O NOME DE SEU BLOG(Cabeçalho)' type='Header'/>
</b:section>
    </div>



 E substitua por este:


<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NOME DO SEU BLOG (Cabeçalho)' type='Header'/>
</b:section>
<b:section class='header-right' id='header-right' maxwidgets='1' showaddelement='yes'>
<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'/>
</b:section>
</div>


Pronto, veja como ficou:


Provavelmente seu teplate deverá ficar torto, conserte isso trocando as medidas do seu blog em "outer-wrapper" que deverá ter a mesma medida de seu "header" (código em azul). Depois troque os demais códigos.
Verde-------largura dos post
Rosa--------largura da sidebar


#outer-wrapper {
width: 960px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 620px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 330px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}





6 comentários:

  1. putz no meu nem tem o #header {

    :S

    ResponderExcluir
  2. Boa tarde tudo bom? |Pra variar inovando hein?
    To passando pra te deixar um beijo pra você e pras crianças.

    ResponderExcluir
  3. vc pode ensina como por gadget dos dois lados do blog?

    ( tipo menus no meu so tem do lado direito e queria por dos dois lados )

    ResponderExcluir
  4. Olhe
    O seu post de hj me fez rir mto.Tudo na vida é assim: dá a mão, pega o pé.
    Até entendo que para leigos é meio dificil "entender" algumas coisas. Isso ocorre direto comigo. Mas não desisto, vou tentando e quando precisar de ajuda,isso provavelmente irá acontecer, pago.kkkk

    Parabéns

    ResponderExcluir
  5. Bom, quando eu dou CTRL + F (Localizar) e copio o trecho pedido ele não localiza :(, será que tem algum outro trecho ou tem como me ajudar ? por favor

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube