Fazendo um Layout do Zero

  • 17:54
  • 25 julho 2016


Olá minha genthy! Como estão hoje? Espero que bem, porque é hoje que vocês vão aprender à criar um layout do zero, acreditem parece ser um bicho de sete cabeça, mas na realidade não é nada disso. No começo quando eu iniciei essa paixão eu costumava a usar o layout do blog, acho que vocês conhecem bem o famoso modelo travel, era nesse que eu personalizava, e na internet você pode encontrar um mar cheio de tutoriais de como personaliza-lo. E nessa nova era de responsivo, ele não se adapta devido ao html, de fato ele não foi programado à ser responsivo, mas já fez e ainda faz muitos blogueiros felizes. E eu sou eternamente grata ao modelo travel do blogger, sem ele eu nunca teria aprendido as linguagens HTML/CSS. Agora sem mais delongas, vamos ao tutorial!

Eu tentei detalhar o máximo nas imagens, mas como está em alta resolução, salvem e dê o zoom para poder lêr e entender ;)

Parte 1

Crie um novo blog e no minimo umas 5 postagens para teste, Feito isso entre em editar HTML, e apague tudinho. Ok! Agora copiei o código Aqui.



Salve e Visualize... Aparece o fundo branco, e os créditos (Desenvolvido por: Black Rose e Adorável Design) certo? Ok, vamos fazendo por partes para entender melhor de como funciona.

Parte 2

Agora vamos completar as lacunas, do Header, Post, Attribution e Navbar do blog. ;)  Vamos começar com o Header, vamos add o próximo código clicando aqui pra copiar.



Na imagem você pode ver que na cor preta é o código adicionando, ficando dentro da tag de abertura <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'> até o fechamento </b:section>. Salve e visualize... Agora você pode ver que aparece o título do blog e os créditos.

Parte 3

Vamos add Attribution e Navbar, copie o código clicando aqui. Veja na imagem abaixo.



Ficando  dentro da tag de abertura <b:section id='fixodoblog' showaddelement='yes'> até o fechamento  </b:section>. Salve e visualize, aparecerá título do blog, os créditos e tecnologia do blogger.

Parte 4

Agora vamos para o Post, importante código, clique aqui pra copiar. Na imagem abaixo eu simplifiquei adicionando as setinhas ▸



Como visto na imagem o código é colocado dentra da tag de abertura <b:section id='main' name='Main' showaddelement='no'> até o fechamento </b:section>.  Salve e Visualize... Agora temos as postagens, e outros elementos...

Parte 5

Vamos arrumar essa bagunça personalizando o CSS Do Blog. Pra não ficar tão extenso o tutorial, já deixei o significado de cada função /* dentro dos asteriscos  */. copie o css aqui. Salve e visualize, claro que ainda está desordem, porque falta o ultimo truque.



Parte 6

Enfim a ultima parte, já temos o css de .container.post-e-sidebar personalizado... certo? Agora precisamos adicionar ele no html para funcionar, procure por <b:section id='main' name='Main' showaddelement='no'> acima dele cole <div class='container post-e-sidebar'>, agora temos que fechar essa div, então... procure por <!-- FIM DA SIDEBAR --> e acima dele cole </div>. Não entendeu..? veja a imagem abaixo.




Veja o resultado final AQUI. A partir daqui vamos aprender à personaliza-lo... o/

Nós vimos os principais elementos usado para a construção de um layout para o blogspot, eu acredito que tem outras maneiras de fazer do zero, mas eu desenvolvi assim dessa maneira, não sou expert, tudo que aprendi foi com muita dedicação.
Eu espero que vocês tenham gostado do post de hoje, se tiver alguma dúvida pergunte nos comentários ou no chat aqui do blog ;)

Beijos e até o próximo post

Compartilhe

Veja Também:

Comentário(s)
4 Comentário(s)

  1. Oi Kaah. tudo bem? Seu blog é muito lindo, parabéns!
    Eu fiz tuuuudoo certinho, mas não funcionou :/ Ele ficou assim : http://hellencassialayout.blogspot.com.br/
    Você pode me ajudar? Desde já, muito obrigada ♥ Beijos!

    http://hellencassia.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Hellen.. Tudo bem e você? Own...Obrigada flor ^-^
      Bom o erro é que esse cod que aparece acima do lay tem que ficar dentro do css Abertura do css , por isso ele não recebe o comando do css e fica assim em desordem, pra gente conversar melhor vou te chamar pelo face via inbox.. Pode ser?

      Excluir
    2. Chamei lá... :D

      Excluir