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:
Então o restante que sobra que é :
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
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)
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:
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
Marcelo R. Souza
5 comentários:
Taí! tô gostando...
@Roberta e @cronicasmalpassadas espero que aproveitem e façam perguntas caso haja dúvidas
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.
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.
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