Programando LayOut - Parte 01

Parte 02 >> | Parte 03>>

Fala aí gente, aqui é o Anon, e hoje venho trazendo a primeira parte da sequência de tutoriais de como Programar um LayOut, normalmente por vocês, chamado de ''system'', então vamos ao trabalho!
 Bem, eu deixei um LayOut preparado para esse tutorial, vocês podem baixá-lo clicando AQUI.. Não ficou bom, mas a intenção verdadeira é ensinar a programar.



 Vamos la, primeiramente vamos "fatiar" o LayOut, ou seja, dividi-lo em três partes sendo elas o Cabeçalho(header-wrapper), Meio(outer-wrapper) e Rodapé(Footer). Siga o exemplo da foto abaixo

INSTRUÇÕES:
HEADER: Para fatiar o Header, você deve levar a ferramenta de corte até onde ele termina, no caso, ele termina acima do campo publicitário. Portanto, ele ficará ASSIM, não esqueça de remover os textos das "HeadLines" e seus fundos.
OUTER: Para fatiar o Outer, você deve cortar apenas a parte que seu template se repete removendo a área das postagens e as colunas laterais(sidebar), ficando ASSIM
FOOTER: Para fatiar o Footer você deverá pegar apenas onde termina o seu template, não deixando aparecer as colunas e área de postagem. Deverá ficar ASSIM.

Pronto, agora já temos o necessário para construir a base de nosso template. Vamos programar então. Entre em "Editar HTML", vá em "Selecionar modelo de layout" e selecione a primeira opção do primeiro template (Minima). Feito isso, vá novamente em "Editar HTML" e vamos começar a redefinir o código.
Vamos dar início à esta parte removendo tudo que impede de deixarmos o LayOut com uma aparência profissional, portanto, aperte CTRL + F e busque por:

border:1px solid $bordercolor;

Provavelmente você encontrou 6 linhas dessas, vamos eliminar TODAS. Feito isso, vamos remover a "Navbar" (barra de navegação do blogger), dê um CTRL+F e procure por:

]]></b:skin>

ACIMA desta linha iremos adicionar o código ara remover a navbar, vamos la:

.navbar{display:none;}

Feito isso vamos remover a linha "Assinar Postagens(ATOM)", dê um CTRL+F e procure por:

.feed-links {

ABAIXO desta linha vamos adicionar o seguinte código que o remove:

display:none;

Se precisar mudar a cor de fundo, busque por: "body {", a cor de fundo do LayOut que deixei é #1a1a1a, adicione isso na frente de "background:"

E por fim, removemos o cabeçalho, busque por:

 <div id='header-wrapper'>

Remova o seguinte código:

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <b:widget id='Header1' locked='true' title='Tutorial de como montar seu template (Cabeçalho)' type='Header'/><br /> </b:section>

Pronto, tudo removido, agora vamos usar as imagens que recortamos anteriormente. Primeiramente, faça Upload delas no seu lugar de preferência (eu, particularmente, recomendo fazer upload no próprio Blogger). Vamos adicionar o Header.. prcure por:

#header-wrapper {

ABAIXO vamos adicionar:

background:url(LINK DA SUA IMAGEM)no-repeat;

Em "Width:660px;" troque o número "160" pela LARGURA de seu Header e logo abaixo adicione(OBS: O INK DA IMAGEM DEVE PERMANECER DENTRO DOS PARENTESES):

height: XXpx;

Substitua "Altura" pela altura de seu Header. Remova também o número na frente de "margin:0 auto". O código deverá ficar assim:

#header-wrapper {background:url(LINK DA SUA IMAGEM)no-repeat;width: XXpx;height: XXpx;}

 Agora vamos adicionar o Outer. Busque por:

#outer-wrapper {

ABAIXO desta linha vamos adicionar a propriedade "background" e também mudar a largura(width), deixando o código assim:

#outer-wrapper {background:url(LINK DE SUA IMAGEM)repeat-y;width: XXpx;margin:0 auto;text-align:$startSide;font: $bodyfont;}

Em "XX" deve ir a largura de sua imagem.

Agora vamos adicionar a imagem no Footer. Busque por:

#footer {

Entre "#footer {" e "}" adicione o seguinte código:

background:url(LINKDAIMAGEM)no-repeat;width:LARGURApx;height:ALTURApx;margin:0 auto;

Deixando o código dessa forma:

#footer {background:url(LINKDAIMAGEM)no-repeat;width:LARGURApx;height:ALTURApx;margin:0 auto;<br /> }

Se você seguiu todos os paços perfeitamente, você terá um resultado ASSIM. Bem, é ''só'' isso.
Se quiserem um próximo tutorial, os seguidores do blog têm que chegar até 85, portanto divulgue e faça o que puder pra atingir esse número, se quiser a parte 2. Até la, pessoal!