Algumas vezes recebo e-mails de leitores pedindo para que eu faça um passo-a-passo de como criar o próprio layout. Por ser um tutorial extenso, nunca pensei em postar nada do tipo aqui no blog, porque não é algo que possa ser resumido em uma única postagem. Então, para ajudar um pouquinho, vou fazer uma sequência de postagens explicando alguns conceitos básicos para quem não quer depender mais de layouts prontos e precisa de um pouquinho mais de noção de HTML e CSS para conseguir editar sozinho.
Um conselho muito útil para quem está começando é: use uma base pronta! O próprio blogger disponibiliza vários templates básicos que depois de editados diminui (e muito) o seu trabalho. Já testei a maioria das versões do blogger, mas a versão mais fácil de usar é o Template Mínima. Por isso todos os tutoriais que vou postar aqui o terão como base. (Para fazer o download basta clicar aqui)
Header: O cabeçalho do layout é representado por: #header-wrapper e #header.
Outer-wrapper (a parte cinza da imagem): Basicamente é parte que abriga todo o layout, representada por #other-wrapper.
Sidebar: A coluna lateral é representada por: #sidebar-wrapper.
Main: A coluna da postagem é representada por: #main-wrapper.
Footer: O rodapé do layout é representado por #footer-wrapper.
É isso! Semana que vem tem a próxima postagem do tutorial. Aproveitem e mandem por e-mail o que vocês querem ver por aqui.
Um conselho muito útil para quem está começando é: use uma base pronta! O próprio blogger disponibiliza vários templates básicos que depois de editados diminui (e muito) o seu trabalho. Já testei a maioria das versões do blogger, mas a versão mais fácil de usar é o Template Mínima. Por isso todos os tutoriais que vou postar aqui o terão como base. (Para fazer o download basta clicar aqui)
Primeiro passo: Conheça a base que você está usando.
Logo no começo do código você vai encontrar as definições básicas das variáveis (Variable definitions). Recomenda-se que não apague, pois alguns recursos do código já estão pré-definidos nesta parte. Isso não impede que você altere os estilos mais para frente no código. Em seguida virão as variáveis utilizados na construção do layout.Segundo passo: Conheça a estrutura do template.
Header: O cabeçalho do layout é representado por: #header-wrapper e #header.
Outer-wrapper (a parte cinza da imagem): Basicamente é parte que abriga todo o layout, representada por #other-wrapper.
Sidebar: A coluna lateral é representada por: #sidebar-wrapper.
Main: A coluna da postagem é representada por: #main-wrapper.
Footer: O rodapé do layout é representado por #footer-wrapper.
Terceiro passo: Nunca altere o código sem ter um backup!
Tudo bem, pode parecer redundante, mas por experiência própria: não corra o risco de perder tudo. O blogger, ou qualquer outra ferramenta, pode falhar de vez em quando e se isso acontecer você vai agradecer muito por ter feito um backup das suas informações. Então sempre que você terminar de alterar o código, baixe a última versão. Isso será útil até se na hora de editar o código você apagar algo que não deveria. ;)É isso! Semana que vem tem a próxima postagem do tutorial. Aproveitem e mandem por e-mail o que vocês querem ver por aqui.
Beijos!
/https://skoob.s3.amazonaws.com/livros/1035724/DE_SANGUE_E_OSSOS_15761436291035724SK1576143629B.jpg)
Aaah adorei a iniciativa. E se continuar explicando dessa forma simples vai ser tranquilo de aprender.
ResponderExcluirBeijo
Quem não conhece e bate de primeira o olho em um HTML acha que a coisa é super e impossível de aprender, mas não é!! Foi assim que achei quando tive meu primeiro Blog, e depois vi que não era tão difícil. Precisa de tempo, sim, mas com persistência você consegue. Depois de uns 2 anos, aprendi sozinha como mexer nesses negócios ( na minha época nem tinha tutoriais ensinando a mexer), hoje sei me virar com o básico que sei. Ótima iniciativa!! :D
ResponderExcluirEu sou ilustradora, e vim aqui te convidar a dar uma olhada no meu portfolio virtual, para conhecer um pouco do meu trabalho :)
Brenda Kwon | Ilustração & Design