Pensar o Designer do Blog o primeiro passo

30 de novembro de 2008

Vamos começar nosso tutorial para criar um template para Blogspot. Espero que tenham lido os artigos sugeridos no post anterior.
A primeira etapa será o Designer do template, então peguem lápis e papel e vamos começar. Lápis e papel? Sim, um template começa fora do ambiente digital.
Iremos elaborar a roupa do blog.
No papel você irá desenhar como será seu blog. Caso tenha uma imagem já pronta melhor, só scaneie e coloque no tamanho desejado, caso não tenha crie usando os conselho do artigo Qual template serve para meu Blog ou Site. Também iremos definir os atributos constantes do Blog como: cor de links, tipografia, etc.

Para estudo usarei meu próprio blog:
  • Largura total do template é de 729px.(outer-wrapper)
  • Largura do conteiner que vão: Header, Posts, Sidebar e Footer, 650px (content-wrapper)
  • Largura do Cabeçalho de 650px; (Header)
  • Largura dos Posts de 417px (main-wrapper)
  • Largura da Sidebar: 233px 
  • Rodapé do Blog de 650px (Footer)
Agora iremos a matemática do Designer. Sabendo as larguras dos itens principais vamos as contas:
417px (main-wrapper) + 233px (Sidebar) = 650px (Soma dos dois itens).
Veja bem, que a largura total do Blog é de 729px que foi calculada sobre a imagem que quero usar, veja mais abaixo a figura.

Então o restante que sobra que é :
729px (outer-wrapper) - 650px (content-wrapper) = 79px.
Este valor será usado para dar espaçamento no Post e na Sidebar.
Para se fazer um estudo correto de largura do blog você precisa ter a imagens completa e final do blog pronta para examinar onde vai ter que colocar: margens e paddings, para que o layout fique com aspecto limpo. Usarei imagens do Css Padrões como exemplo, veja figura do template abaixo:

A partir desta imagem pronta que se chegou as medidas acima.

Depois que se tem todas as medidas anotadas em papel e a imagem inteira pronta faremos a fatiação da imagem para aplicarmos no Layout.
No próximo artigo veremos cada fatia pronta e veram que está imagem se tornará em no máximo 5 ou 6 para aplicamos no Blog inteiro.
Até o próximo artigo.

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

5 comentários:

cronicasmalpassadas disse...

Taí! tô gostando...

Marcelo R. Souza disse...

@Roberta e @cronicasmalpassadas espero que aproveitem e façam perguntas caso haja dúvidas

Johnny Rox disse...

Algo de grande ajuda pra mim foi encontrar um template-base limpo, customizável e fluído, onde eu podia experimentar e mover os elementos de página à vontade. Comecei a entender um pouco melhor o código, e até criei 2 hacks, aproveitando outros tutoriais. Quando comecei no início do ano, não conseguia fazer quase nada. De lá pra cá, muita coisa legal foi publicada para o Blogger.

Marcelo R. Souza disse...

Johnny Rox além de escrever história com muito humor e inteligência, ainda cria hacks? Parabéns e é um prazer ter um comentário seu no meu humilde blog.

Johnny Rox disse...

Queisso, Marcelo. Meu blog também é humilde. Outro dia a LadyBug me chamou de "senhor". Num tô intendendo ocêis.

Postar um comentário

Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:

<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>

Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa