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

Por Áurea |

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

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