Páginas

24 fevereiro 2010

Como aumentar/diminuir o tamanho do banner/cabeçalho no blogger

ATENÇÃO: NOVA MANEIRA DE DIMINUIR O TAMANHO DO BANNER DE FORMA SIMPLIFICADA! CLIQUE AQUI.

Gente, pastei MUITO para descobrir isso, mas finalmente consegui. Vou postar a dica aqui pra vocês que querem saber como aumentar/diminuir o tamanho do banner/cabeçalho num blog do blogger.
 
O restante do blog estava maior do que o banner, o que o deixava um pouco 'deslocado'.

 
Finalmente o banner ficou do mesmo tamanho.


Descubra como: 
1º: Faça login no blogger.com 
2º: No painel, clique em DESIGN
3º: Clique em EDITAR HTML
4º: Selecione EXPANDIR MODELOS DE WIDGETS
5º: Aperte Ctrl + F e digite #header-wrapper para achar a área em questão.


Você encontrará o seguinte código:
#header-wrapper {
  width:760px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
O meu está no tamanho 760px. Aumente esse número ou diminua até ficar na largura correta.
Qualquer problemas, escreva tuas dúvidas nos comentários. Boa sorte!

20 comentários:

  1. no meu editor de html do blogger nao tem esse codigo nao ta assim:

    header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
    _background-image: none;
    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font-size: $(description.text.size);
    color: $(description.text.color);
    }

    .header-inner .Header .titlewrapper {
    padding: 22px $(header.padding);
    }

    .header-inner .Header .descriptionwrapper {
    padding: 0 $(header.padding);
    }

    ResponderExcluir
  2. O meu está assim:

    /* Header
    ----------------------------------------------- */
    .header-outer {
    margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
    background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    text-shadow: 0 0 $(title.shadow.spread) #000000;
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font: $(description.font);
    color: $(description.text.color);
    }

    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    }

    .header-inner .Header .titlewrapper {width:1000px;
    padding-top: $(header.padding.top);
    }

    Eu preciso que o banner ocupe toda área de cima do meu blog

    ResponderExcluir
  3. Por favor ajuda a gente. no meu tambem nao tem esse código ae!

    ResponderExcluir
  4. Nomeu deu certinho! Vlw aew!!! Para quem não está conseguindo, digite ctrl+F e depois procure por "#header-wrapper {" sem aspas... Abraços!

    ResponderExcluir
  5. Parabéns pela descoberta, eu estava quebrando a cabeça aqui.

    valeww!!!!

    ResponderExcluir
  6. para quem não conseguiu, talvez tenha que marcar a opção "xpandir modelos de widgets"

    ResponderExcluir
  7. Este comentário foi removido pelo autor.

    ResponderExcluir
  8. Olá a muito tempo quero aumentar o cabeçalho do meu blog e centraliza-lo, já fiz de td e não consegui, inclusive esse código que vc deu, eu não acho no htlm do meu blog,cujo Template é o VIAJEM do blogspot, me ajude por favor!

    ResponderExcluir
  9. Para quem está tendo problema, procure por:

    #header{display:block;position:relative;z-index:5;height:COLOQUE O TAMANHO QUE QUISER, AQUI É A LARGURApx;}

    ResponderExcluir
  10. http://blogamandacosta.blogspot.com.br/

    Olha eu não consegui, a minha interface num tem a opçao editar modelo, e nao tem esse codigo em editar html, mesmo qdo seleciono expandir gadgets!
    O que eu faço????

    ResponderExcluir
  11. Ahhh \o/
    Finalmente consegui! Muito Obg mesmo!

    ResponderExcluir
  12. Eu digitei #header-wrapper mas do lado estava vermelho e escrito 0 de 0, me ajude please.

    Blog:
    juliastardollgratis.blogspot.com

    ResponderExcluir
  13. Para quem nao esta conseguindo tente procurar apenas por Header

    ResponderExcluir
  14. olá o meu está assim

    /* Header
    ----------------------------------------------- */
    .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
    _background-image: none;
    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);text-align: center;
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font-size: $(description.text.size);
    color: $(description.text.color);
    }

    .header-inner .Header .titlewrapper {
    padding: 22px $(header.padding);
    }

    .header-inner .Header .descriptionwrapper {
    padding: 0 $(header.padding);
    }

    e quando procuro da 0 O como faço?

    http://dualityexistence.blogspot.pt/

    ResponderExcluir
  15. Vocês estão fazendo do jeito mais complicado, em vez de ir em editar HTML,va em Personalizar que é moleza.

    ResponderExcluir
  16. no meu html e diferente está assim


    /* Header
    ----------------------------------------------- */
    .header-outer {
    margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
    background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    text-shadow: 0 0 $(title.shadow.spread) #000000;
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font: $(description.font);
    color: $(description.text.color);
    }

    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    }

    .header-inner .Header .titlewrapper {
    padding-top: $(header.padding.top);
    }



    eu adicionei uma gadget cabeçalho mais eu queria ajusta a largura e tamanho pode me ajuda? o endereço e http://guildapraqnome.blogspot.com.br/

    ResponderExcluir
  17. no meu html e diferente está assim


    /* Header
    ----------------------------------------------- */
    .header-outer {
    margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
    background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    text-shadow: 0 0 $(title.shadow.spread) #000000;
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font: $(description.font);
    color: $(description.text.color);
    }

    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    }

    .header-inner .Header .titlewrapper {
    padding-top: $(header.padding.top);
    }



    eu adicionei uma gadget cabeçalho mais eu queria ajusta a largura e tamanho pode me ajuda? o endereço e http://guildapraqnome.blogspot.com.br/

    ResponderExcluir
  18. Tipo todos dizem a mesma coisa de expandir sei lá o que aff . Eu sei que vocês deram um duro danado pra construir um blog mais custa contar de verdade qual é o código deve custar né ;)

    ResponderExcluir