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
