Como Alterar a Imagem no Topo do Template e o Tamanho do Cabeçalho

Este tutorial serve para os modelos do Blogger 2006. Com a atualização do Blogger 2010 ficou mais fácil mudar estas imagens pela própria interface do Blogger.

De qualquer forma vale a pena dar uma lida para aprender um pouco sobre o que é header (cabeçalho), medidas, margens, altura, largura, etc. Várias informações úteis para você aprender e personalizar o seu blog.

Clique nas Imagens e Siga as Orientações Contidas Nelas




INSTRUÇÕES PARA COLOCAR UMA IMAGEM NO CABEÇALHO (HEADER):

1º- O tamanho da sua imagem em pixels deve ser o mesmo do header;
2º- Você deve hospedar sua imagem em algum servidor de imagens; Ex: Tinypic ou o próprio blogger;
3º- Copie o endereço (URL) do link da imagem e cole entre os parênteses do código abaixo:
background: url("URL-link da imagem") top center no-repeat;
Se não tiver esta linha no bloco de códigos do #header, acrescente-a.
Entenda:
» top center no-repeat→ indica que a imagem irá se localizar no topo, centro e não vai se repetir.
             ♦Aprenda mais sobre códigos CSS-Folhas de Estilo nesse endereço: Introdução: o que são Folhas de Estilo? ;
» Se sua imagem for menor que o espaço destinado à ela e você queira colocar uma cor neste espaço, diferente da cor do fundo, coloque o código html da cor onde está representado em verde:
background: #FFFFFF url(URL link) top center no-repeat;

PARA COLOCAR BORDA NA SUA IMAGEM (BORDER):

» Se for colocar em torno de toda imagem (4cantos), use o código:
border: 1px solid #000000;

» Apenas do lado esquerdo:
border-left: 1px solid #000000;

» Apenas do lado direito:
border-right: 1px solid #000000;

» Apenas no topo:
border-top: 1px solid #000000;

» Apenas no rodapé:
border-bottom: 1px solid #000000;
Entenda:
[1px] → Indica a largura da borda → é aí que entra a alteração da largura ou altura do [#header-wrapper]
Ex: Se colocar uma borda de 10px em todos os cantos da imagem terá que aumentar 20px na altura [height] e 20px na largura [width] do [#header-wrapper], ou se não der para aumentar o diminuir [#header-wrapper] por causa da largura total do template -> diminua a imagem essas medidas e depois coloque-a; [solid]->Indica o tipo de borda:
    • solid=linha
    • dashed=tracejada
    • dotted=pontilhada
    • ridget=cume
    • inset=inserido
    • outset=outset
    • none=nenhuma
[#000000]→ Indica a cor da borda. Nesse caso preta.

Se quiser saber mais sobre CSS e HTML clique na categoria: ♦APRENDA HTML E CSS

Como Alterar a Imagem no Topo do Template e o Tamanho do Cabeçalho Como Alterar a Imagem no Topo do Template e o Tamanho do Cabeçalho Reviewed by Áurea on 10/13/2007 Rating: 5

54 comentários:

  1. Excelente explicação!

    Parabéns e obrigada pelo seu blog!

    ResponderExcluir
  2. O seu blog tem me ajudado muito!!!
    Muito obrigada pelas suas dicas...

    Parabéns pelo seu blog!

    ResponderExcluir
  3. Seu site foi essencial pra mim!!
    Obrigado!

    ResponderExcluir
  4. Muito bem pelo post.....parabens...vou treinar no meu blog

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

    ResponderExcluir
  6. Dentre vários tutoriais que pesquisei , o seu foi o melhor exposto, deu para se orientar muito bem, (a combinação com as imagens foi perfeita).

    ResponderExcluir
  7. Blog do Mijadinha Não imagina o quanto fico honrada com suas palavras, que me deixam muito feliz! Obrigada!

    ResponderExcluir
  8. Olá,
    Estou encantada com seu blog!! Estou começando a engatinhar em blogs, tô achado mais complicado que site, já tive um, mas blog, é mais difícil!!!
    Obrigada pelos tutoriais!!
    Um beijo grande,
    Florisa Leal

    ResponderExcluir
  9. tutorial muito útil, graças a ele acabou minha aflição
    muito obrigado

    ResponderExcluir
  10. Olá espero que possa me ajudar ?
    Gostaria de deixar o header e o rodapé igual a deu seu site por inteiro!

    ResponderExcluir
  11. Veey Muito Obrigado Eu Tinha Feito Um Banner Mais Ele Estava Maior Que O Cabeçalho!
    Vlw Mesmo Vcs Estão me ajudando muito com Templates e Ferramentas

    ResponderExcluir
  12. Parabéns pelo blog!!!!!é realmente muito bom! Conteúdo Original!!![...]

    ResponderExcluir
  13. ola e parabens pelas dicas sao senpre bastante uteis para quem esta a comecar como eu.
    Mas tenho uma duvida...como faco para colocar a imagem de cabecalho, a ocupar a pagina de ponta a ponta. nao tendo margens do lado esquerdo, direito e em cima.
    os codigos sao diferentes no meu html. ora veja:
    /* Header
    ----------------------------------------------- */
    .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
    _background-image: none;

    color: $(header.text.color);

    -moz-border-radius: $(header.border.radius);
    -webkit-border-radius: $(header.border.radius);
    -goog-ms-border-radius: $(header.border.radius);
    border-radius: $(header.border.radius);
    }

    .Header img, .Header #header-inner {
    -moz-border-radius: $(header.border.radius);
    -webkit-border-radius: $(header.border.radius);
    -goog-ms-border-radius: $(header.border.radius);
    border-radius: $(header.border.radius);
    }

    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
    padding-left: $(header.padding);
    padding-right: $(header.padding);
    }

    .Header h1 {
    font: $(header.font);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    }

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

    .Header .description {
    font-size: 130%;
    }



    ajudem s.f.f
    gostava de ter um cabecalho igualzinho a este blog. inagem difrente claro mas do mesmo estilo.
    obrigado

    ResponderExcluir
  14. ruin naum gostei!!! sou mais novotemplate para o BLOGGER

    ResponderExcluir
  15. Tá de parabens amigo , valeu mesmo pela dica !!!!!!!

    ResponderExcluir
  16. Muito obrigado pela dica, me salvou.
    Sua linda!

    ResponderExcluir
  17. Muito Bommmm!!!!!!!!!!!!!!! *-*

    Vlwww ae Belo Blog!!! ^^

    ResponderExcluir
  18. Parabens pelo blog, bem explicado e me ajudou muito

    ResponderExcluir
  19. parabens pelo seu blog e de grande ajuda vlw

    ResponderExcluir
  20. Não conseguir achar isso de /-Header no meu blog cara, oq faço?
    pode me ajudar, ñ tem esse código no meu

    ResponderExcluir
  21. Não estou conseguindo :( Peguei um template para modificá-lo, porém o cabeçalho dele é só uma cor sólida de fundo, mas eu queria substituí-lo por uma imagem. Tentei de todas as formas que está escrito no tutorial e não consegui. Me ajudem? meu e-mail é thaislto@hotmail.com

    Obrigada.

    ResponderExcluir
  22. Gente não hospeda no picasa ele muda o tamanho de imagen eu consegui no Photobucket vlw

    ResponderExcluir
  23. Ajudou-me muito! Valeu, tudo de bom.

    ResponderExcluir
  24. Fiz questão de comentar devido ao fato de esse ter sido o ÚNICO lugar que me ajudou, não só por fornecer a informação correta, mas pela linguagem simples e pelo post auto-explicativo. Parabéns, de verdade, Pelas dicas e pela competência.
    hehe

    Muito grata,
    Erica.

    ResponderExcluir
  25. @Erica Mello
    Obrigada Erica,
    Fico muito feliz em ter ajudado!
    Seja sempre bem vinda!

    ResponderExcluir
  26. Ola, eu não estou conseguindo achar o header no blog. O meu está parecendo códigos diferentes. Sou nova e ainda estou aprendendo como fazer, se puder me ajudar, agradeço. Obrigada

    ResponderExcluir
    Respostas
    1. Olá Allegra Fest,

      O modelo de template que você usa é 2010. Você pode fazer estas alterações no próprio blogger.
      Estas alterações deste artigo se aplicam aos modelos mais antigos onde não tínhamos tantos recursos legais no blogger.

      Excluir
    2. Ok, obrigada. Se eu quiser aumentar a imagem do meu cabeçalho eu consigo? Conhece tutoriais deste novo template, queria modificar algumas coisas e ter algumas dicas...Obrigada!

      Excluir
  27. aff seria mais facil fazer um video

    ResponderExcluir
  28. Olá Aurea! Gostei muito da sua postagem, parabéns! Porém no meu caso eu queria colocar uma imagem antes do título do meu blog, mas em meu blog de testes ou a imagem fica atrás do título ou acima dele. Aguardo resposta, grande abraço!!!

    ResponderExcluir
    Respostas
    1. Thomas,
      Neste caso você terá que criar outra div para colocar o título abaixo da imagem. Pode ser header1 por exemplo.
      Não tem como eu explicar como fazer isso agora porque não estou tendo muito tempo. Talvez você encontre algum tutorial no Mundo Blogger ou no Templates para Novo Blogger. Os links estão aqui no TPV no rodapé.

      Excluir
    2. Obrigado Aurea,vou pesquisar!

      Excluir
  29. olá gostaria de saber como faço para criar postagens em cada categoria. por axemplo: das categoria .Policia ,politica. Noticia. quero aber como faço para fazer isso..assunto relasionado a policia, quero colocar todas na categoria Policia.. me ajudem por favou

    ResponderExcluir
    Respostas
    1. Ray,

      Vou criar um artigo explicando como criar categorias para os seus posts. Aguarde só mais um pouco, pois estou meio sem tempo, mas vou me dedicar ao blog neste sábado.
      Seja bem vindo ao TPV

      Excluir
  30. VALEU E MIM FORMEI AGORA EM WEB DESING PROFISSIONAL , E ESTE SITE MIM DEU M SUPORTE AINDA MELHOR

    ResponderExcluir
  31. Por favor me ajude!!!!! Eu já tenho um cabeçalho no meu blog mas queria expandi-lo. Eu clico em Modelo, depois em Editar HTML só que pra mim não abre a tela Editar modelo e sim ir para um widget. Aí escolho Header 1 e não tem esses códigos.... o que eu faço pelo amor de Deus?! Bjs

    ResponderExcluir
    Respostas
    1. She Wolf,

      Se você clicou em Editar HTML e a tela fica branca clique novamente em modelo e em Editar que abrirá para edição. Isso acontece comigo sempre.
      Não escolha o gadget para editar, faça-o no código HTML mesmo que dá certo.
      Se você estiver usando um modelo de template 2010 poderá ser mais difícil e a opção de alterar os tamanhos das colunas já está fácil pelo próprio blogger. Mas se seu template não for assim use o editor de HTML. Este artigo poderá te ajudar. Veja: Como Acessar o HTML do Blogger e Ativar o Search

      Excluir
  32. oi bom dia..muito interessante esse artigo para aumentar o cabeçalho,mas tenho uma duvida no meu não tem esse arquivo [#header-wrapper,como faco para aumentar sem encontrar esse arquivo...desde já agradeço..

    ResponderExcluir
  33. Ola, existe algum script ou algo do tipo, que substitua aquelas imagens que esta offline por uma outra. No meu blog tem muitas que eu usava e sumiu, só aparece o quadrado com um x no meio. trocar uma por uma vai ser dificil, talvez exista algum script que troca todas elas por uma padrão, mais não acho, sera que existe?

    ResponderExcluir
  34. Parabéns. Ajudou muito, principalmente a 2a. figura oncd constam os elementos e para que servem. Sou leiga e só aqui encontrei explicações que pudesse usar.
    Muito obrigada.

    ResponderExcluir
  35. Obrigada,acabei de usar em meu blog :)

    ResponderExcluir
  36. Desculpa o palavriado mas vc é muitooooo fodaaa, PARABÉNS eu procurei quase um dia inteiro por isso e tudo que achava era mudar a imagem na porcaria do gadgers VOCÊ me salvou merece meu respeito de coração mesmo, Obrigadooooooo bjaooooooooooooo valeu demas.me escrevi ok e nos.

    ResponderExcluir
  37. Obrigada pelos seus comentários leitores.
    Fico muito feliz em estar ajudando com este tutorial!
    Sejam sempre bem vindos ao TPV!

    ResponderExcluir
  38. no meu nao tem nenhum desses,me ajuda??

    ResponderExcluir
  39. Aurea, eu estou pretendendo colocar o meu cabeçalho neste modelo do seu e inclusive vi diversos blogs assim. A imagem pequena com o anúncio do lado direito. o meu blog é simples www.misturadealegria.blogspot.com.br
    , mas se Deus quiser ainda terá o perfil do seu.rsrsrsrrs Se puder me ajude por favor! Abraços.

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.