NOVO: Fazer Templates II - Colocando as imagens no blog

Agora sim, vamos começar a parte do tutorial de hoje... Eu pensei muito, e vou conseguir dividí-lo em três partes apenas!!!
Então, vamos voltar lá no nosso blog de testes para continuar a editar o template, Lembre-se que só depois de seguir à risca o tutorial de ontem é que você deve seguir o de hoje!!!

Coloque as abas (menu) no lugar:

Antes de tudo, entre no Painel novo do Blogger e Clique na aba "Páginas" e em "Mostrar páginas como" escolha a opção "Guias na parte superior", como na foto abaixo:

Depois clique em "Salvar organização".

Colocando o Cabeçalho (Header):

A primeira coisa que vamos fazer é colocar o cabeçalho. Essa é a única parte que vamos ter que repetir amanhã quando colocarmos o template no seu blog...
Entre na aba Layout (Design) e clique no link "Editar", do seu cabeçalho. Vai abrir uma pou-up. No item "Imagem", escolha a imagem de seu cabeçalho em "De seu computador" ou cole o endereço da imagem em "Da web".
Vai aparecer uma miniatura do seu cabeçalho. Depois de aparecer, escolha em "Imagem" a opção "Em vez de título e descrição". Vai ficar mais ou menos assim:

Depois clique em "Salvar".

Tirando o link do cabeçalho:

Até aqui, nada diferente do processo normal de colocar o cabeçalho do blog. Para tirar o link do cabeçalho (já repararam que o cabeçalho tem a tendência a ficar como link?) vamos em  Modelo > HTML (caixinha branca abaixo da miniatura do seu template).
Copie o seguinte código:

<div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a> 


Clique em qualquer parte do seu HTML e aperte Ctrl+ F. Agora cole o código na caixinha que acabou de aparecer (Search) e aperte a tecla "Enter". No trecho que ficou em destaque, apague as linhas indicadas acima em vermelho (as duas, não se esqueça de apagar o </a>).

Continuação:

Agora procure (com a caixinha Search) o seguinte trecho:  .content-inner {

Aparecerá um código assim:

      .content-inner {
  padding: $(content.padding) $(content.padding.horizontal);
}

Apague todo o trecho em vermelho.

Agora procure pelo código: .header-outer {

Vai aparecer um código assim:

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

Troque-o inteiro pelo código abaixo:

.header-outer {
width:990px;
height: 476px;
margin: 0px auto;
display: block;
overflow: hidden;
}

Visualize para ver se não dá erros, seu template estará mais ou menos assim:

Parece estranho, mas é assim mesmo que tem que ficar. Clique em "Salvar Modelo".

Colocando o fundo (Background):

Eu já havia ensinado como colocar o fundo no blog, mas vamos ter que colocar o fundo pelo HTML para que seu blog fique 100% bom. Ah, vou dar uma dica que nem eu sabia: imagens de fundo que tenham tamanho maior que 5kb tendem a ficarem fixas na tela quando usamos o scroll do mouse... Sério!!! Meu fundo tinha 6kb e ficou fixo um tempão, até que eu troquei por um menor. Então quando for escolher a imagem do fundo, prefira as de 5kb para baixo... A não ser que você as queira fixas mesmo.

Continue no "Editar HTML" e copie o seguinte código: body {
Clique em qualquer lugar do código, aperte Ctrl+F e na caixinha que abriu (Search), cole o código que você acabou de copiar e aperte a tecla "Enter". Vai aparecer o seguinte trecho:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

Vamos substutuí-lo pelo trecho abaixo:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: url(URL_DA_IMAGEM) repeat scroll top center;
margin: 0px;
padding-bottom:10px;
}

Troque URL_DA_IMAGEM pelo endereço da sua imagem de fundo.
O código em vermelho determina a posição do fundo. O primeiro, repeat, determina que o fundo vai se repetir por toda a página. Troque por repeat-y se quiser que só se repita na vertical, repeat-x se quiser só na horizontal e no-reapeat se quiser que não se repita.
O segundo, scroll, determina que o fundo vai rolar com a tela. Troque por fixed se quiser que ele fique fixo e não se mova com a tela.
Top determina que vai se posicionar no topo da tela. Troque por bottom se quiser que fique abaixo. E center determina que a imagem ficará no centro. Troque por left se quiser que fique na esquerda e right, se quiser que fique na direita.

Clique em "Visualizar" para ver se está do jeito que você quer.

Mudando o corpo do template:

Agora procure por esse trecho: .main-outer {
Vai ficar em destaque um código assim:

.main-outer {
  border-top: $(main.border.width) solid $(body.rule.color);
}

Troque por esse:

.main-outer {
width: 990px;
display: float;
margin:0px auto;
background: url(URL_DA_IMAGEM) repeat-y top center;
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 */
}

O número em vermelho tem que ser o mesmo da largura do seu blog. No lugar de URL_DA_IMAGEM cole o endereço da imagem que fizemos ontem que eu chamei de "Main-outer" (aquela que cortamos do meio do template).

Abaixo desse código, tem dois assim (se tiver só um, modifique o único que tem pelo seu correspondente):

.fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 1px solid $(body.rule.color);
}

.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 1px solid $(body.rule.color);
}

Troque por esse código:

.fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 0px solid $(body.rule.color);
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 */
}

.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 0px solid $(body.rule.color);
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 */
}

Trocando o Rodapé (Footer):

Agora vamos trocar o rodapé que fecha o seu template. Procure pelo trecho: .footer-outer {
Vai ficar em destaque o seguinte código:

.footer-outer {
  border-top: $(footer.bevel) dashed #bbbbbb;
}

Agora troque-o pelo código a seguir:

.footer-outer {
width: 990px;
height: 37px;
margin-top:-20px;
background: url(URL_DA_IMAGEM) no-repeat bottom center;
}

Troque URL_DA_IMAGEM pelo endereço da imagem de Footer (Rodapé) que hospedamos no tutorial anterior. Os números em vermelho devem ser trocados pela dimensão exata da sua imagem do Footer, o primeiro número (width) é a largura e o segundo (height) é a altura.
Visualize para ver se não deu nenhum erro. Se tudo der certo, apenas o seu menu estará no lugar errado. Se estiver tudo OK, clique mais uma vez em "Salvar Modelo".

Colocando o menu em cima do cabeçalho:

Procure pelo seguinte código: .tabs-inner .section:first-child ul {
Vai aparecer o seguinte trecho:

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

Apague toda a parte em vermelho.

Logo abaixo temos o seguinte código:

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

Troque apenas o trecho em vermelho pelo seguinte código:

  margin-top:-197px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 70px;

Os números que eu defini são para o meu cabeçalho, visualize para ver onde o seu menu foi parar. Ajuste o 197 do margin-top para mais se você quiser que ele suba e para menos se quiser que ele desça. Altere o margin-left para mais se quiser que vá mais para a direita, e coloque um número negativo se quiser que vá mais para a esquerda. Deixe o margin-right sempre no zero.
O margin-bottom define a distância entre o menu e o conteúdo do blog. Aumente o número se quiser que o conteúdo se afaste mais e diminua se quiser que ele chegue mais perto. Vá visualizando o template para ir ajustando até ficar no lugar certo.

Logo abaixo, temos o seguinte trecho:

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

Troque ele todo por esse:

.tabs-inner .widget li a {
  display: inline-block;
height: 26px;
  padding: .5em 1em;
padding-top: 10px;
  font: $(tabs.font);
  color: $(tabs.text.color);
  border-$endSide: 3px solid mediumvioletred;
}

O primeiro código em vermelho é a altura do seu menu. Aumente ou diminua o valor de acordo com seu template. O segundo em vermelho é a borda que fica entre cada link, 3px é a largura da mesma (se quiser você pode colocar 2px, 1px ou 0px se não quiser borda nenhuma), solid é o tracejado da borda, se quiser a linha tracejada, troque por dashed e se quiser pontilhada coloque dotted. Mediumvioletred é a cor. Você pode trocar um código hexadecimal (ex: #000000 para preto) ou por uma Named Color (ex: black).

Mais abaixo um pouco temos os seguintes códigos:

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

Troque todo o código por estes:

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a {
  color: mediumvioletred;
  background-color: black;
  text-decoration: none;
}

.tabs-inner .widget li a:hover {
 color: mediumvioletred;
  background-color: hotpink;
  text-decoration: none;
}

A primeira parte destacada em vermelho define quais serão as cores da aba selecionada, color é a cor da fonte e background-color é a cor do fundo. O segundo código em vermelho se refer as cores da baba quando passamos o mouse, color é a cor da fonte e background-color a cor do fundo. Troque as cores que eu coloquei por outra em named color (como black, por exemplo) ou por um código hexadecimal (como #000000 por exemplo).

Visualize, se tudo estiver certo, seu template estará perfeito!!! Clique em "Salvar Modelo" para terminar.

Continue o tutorial na Parte 3!!!

Mil Sweetkisses,