17 fevereiro 2013

Fazendo meu layout - Parte 1


Um dos sonhos de qualquer blogueira é fazer um layout divo para seu blog, não é? Mas muitas ainda não sabem como se faz um layout, aliás, quase ninguém sabe. Eu fiz o curso de Web Design e posso dizer, modificar os códigos disponibilizados no blogger é "mamão com açúcar" perto de começar uma página da internet do zero. Como muitas blogueiras me pediram, hoje vou iniciar uma série de posts ensinando a fazer o seu próprio layout. Essa é uma ótima opção pra quem não tem dinheiro pra investir num layout pago, além de você aprender a lidar com HTML para quem sabe, no futuro, começar suas próprias encomendas de layouts.
Mas antes de tudo um aviso. É necessário muita atenção e paciência para se fazer qualquer coisa em HTML. Um errinho e seu blog pode estragar todinho. Jogue a preguiça de lado e vamos lá!

O post de hoje ensina a tirar alguns códigos para tornar a aparência mais bonita. Bem básico!
Primeiro, crie um novo blog e escolha o modelo Travel (viagem), o que tem um fundo todo branco. Recomendo que todo(a) blogueiro(a) tenha mais de um blog. Um que você posta as coisas publicamente e outro (ou outros) para a criação de layouts, testes de tutoriais, etc.
Depois de seu blog pronto siga os passos abaixo.

Vá em Modelo  Clique em Personalizar.


Depois, na guia Avançado, escolha uma cor para o fundo da postagem.


No canto superior direito clique em "Aplicar ao blog".

Agora é a parte que exige mais atenção. Vamos mexer nos códigos HTML. 
Primeiro vamos tirar as bordinhas de papel que são horrorosas.

No painel do blog, clique em "Modelo", depois em "Editar HTML".

Vai abrir uma caixinha cheia de códigos. Marque a opção "Expandir modelos de widgets". Depois aperte no seu teclado Ctrl+F ou F3. Note que abriu uma caixinha de pesquisa no canto superior direito da página. Cole nela o seguinte código.
content-outer .content-cap-top {
Note que a essa parte se destacou no código geral.
Agora, apague os trechos destacados abaixo.
.content-outer .content-cap-top {
height:$(content.imageBorder.top.space);
background: transparent$(content.imageBorder.top) repeat-x scroll top center;
}
.content-outer {
margin: 0 auto;
padding-top: $(content.margin);
}
.content-inner {
background:$(content.background);
background-position: left -$(content.imageBorder.top.space);
background-color:$(content.background.color);
padding: $(content.padding);
}
Feito isso clique em "Salvar Modelo".


Agora vamos colocar um plano de fundo no blog. Há dois modos de se fazer: pelo design de modelo e pelo HTML.

PELO DESIGN DE MODELO
No painel do blog, clique em "Modelo", depois em "Personalizar"
Na aba "Plano de fundo" clique no local indicado na figura abaixo.


Na página que se abre escolha um plano de fundo ou faça o upload da imagem do seu computador. Feito isso, clique em "Aplicar ao blog".

PELO HTML
No painel do blog, clique em "Modelo", depois em "Editar HTML".
Marque a opção "Expandir modelos de widgets". Depois aperte no seu teclado Ctrl+F ou F3.
Pesquise por:
body {
Abaixo dele deve estar assim:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}
Apague a linha destacada em azul e cole no lugar esse código:
background: url(URL DA IMAGEM)repeat fixed;
Coloque o url da imagem no local indicado, visualize e depois salve.

Pronto! O seu layout já está aparentemente bonito. Veja o meu como ficou:


No próximo post vamos aprender a personalizar a sidebar, a coluna lateral do blog.

Beijos e até mais!

28 comentários:

  1. Adorei o tutorial :3 Vou continuar acompanhando ele :)
    Beijos
    webzumbi.blogspot.com

    ResponderExcluir
  2. Amei o tutorial *-*
    http://oque-fazer.blogspot.com.br

    ResponderExcluir
  3. Muito legal o tutorial, mas eu preciso criaar um novo blog pra fazer?

    ResponderExcluir
    Respostas
    1. Eu acho bom criar um novo blog, porque caso aconteça algum erro não interfira no seu blog principal. Você pode criar um blog novo e deixar só para testes. Eu faço assim. Tenho 4 blogs, mas somente um é público, os outros são para criação e testes de tutoriais.

      Qualquer dúvida pode entrar em contato pelo face.

      Excluir
  4. Obrigada por postar esses tutoriais! É difícil achar um que explique bem hahahaa

    Beijos
    http://gavetadefutilidades.blogspot.com.br/

    ResponderExcluir
  5. Eu adorei o tutorial, coooom certeza vou continuar acompanhando, por que parei de postar no meu blog há um tempo porque estava triste com o layout dele. E como não sei mexer em html, tudo fica mais difícil. Mas eu adorei essa sua idéia de nos ajudar a fazer um layout!
    Só uma sugestão: você poderia postar a imagem de como fica o blog depois de todas essas mudanças de html, assim ficaria mais fácil ver se a gente quer ou não fazer essas mudanças ;)
    bjs

    ResponderExcluir
    Respostas
    1. Vou seguir a sugestão. Não sei como não tinha pensado nisso antes. Valeu mesmo.
      Volte sempre por aqui!

      Excluir
  6. Oi Nah,Peguei esse seu layout ,muito lindo ;)

    ResponderExcluir
  7. Este comentário foi removido pelo autor.

    ResponderExcluir
  8. Adorei seu blog, Nah! Fiquei super feliz quando encontrei este passo-a-passo para criar meu próprio layout :D

    Só que faltou alguma informação para chegar no mesmo resultado que o seu. Fiz tudo direitinho, mas no final a barra lateral ainda estava com fundo branco e com as divisórias/bordas. Aí fui no modelo > personalizar e deixei tudo transparente. Não sei se foi isso que você fez (espero que sim) :P

    Vou passar seu blog pra uma amiga, porque a gente não estava se entendendo bem com esse layout Travel por causa daquele fundo cinzento no topo :P Consegui remover aquilo fazendo umas alterações nas variables, mas seu jeito era bem mais fácil (nem me toquei disso, newbie em HTML).

    Thanks pelo ótimo tutorial (e pelo blog lindo!)

    =*****

    ResponderExcluir
  9. Desculpe o incomodo mas não consigo encontra o código "content-outer .content-cap-top {".
    Uso o CTRL+F.

    Se não me engano "acho" que é porque o o blogspot atualizou já podendo fazer essas mudanças sem ser por html.

    ResponderExcluir
  10. Desculpe o incomodo mas eu não consegui localizar nos HTML "content-outer .content-cap-top {".
    Utilizando o Ctrl+F

    Agradeço se poder me ajudar.

    Obrigado pelo tutorial.

    ResponderExcluir
    Respostas
    1. Dá uma olhada nesses dois posts. Talvez eles te ajudem na hora de encontrar o código.

      http://nataliamedice.blogspot.com.br/2013/04/duvidas-sobre-o-novo-blogger.html

      http://nataliamedice.blogspot.com.br/2013/05/encontrando-codigos-no-novo-blogger.html

      Excluir
  11. Seguindo com muiiito prazer! chei tudo (ou quase) que preciso pra deixar meu blog lindoooo!!!
    Começando a editar o layout agora!!!
    www.bjmakes.com

    ResponderExcluir
  12. como eu faço pra copiar o url da imagem?

    ResponderExcluir
    Respostas
    1. Clique com o botão direito do mouse em cima da imagem e depois em "Copiar URL da imagem".

      Excluir
  13. porque eu estou pesquisando os codigos e nao aparece nada deles para eu poder substituir?

    ResponderExcluir
  14. Amei o tutorial é a primeira vez que consigo fazer os passos direitinho!

    ResponderExcluir
  15. Consegui fazer direitinho !

    ResponderExcluir
  16. Muito bom parabéns!
    O.B.S.=Seu blog é lindo!
    =>http://blog--my--world.blogspot.com.br/

    ResponderExcluir
  17. Nah uma dica você poderia colocar um link para ir diretor para fazendo meu layout 2.. e do 2 ao 3..

    Amei o seu blog e seus tutoriais.

    07/09 Feliz dia da Independência do Brasil.

    ResponderExcluir
  18. Parabens seu blog é perfeito s2

    ResponderExcluir
  19. Oi Nah eu n achei o "Expandir modelos de widgets" o q eu faço?

    ResponderExcluir
  20. Nossa! você não sabe o quanto está me ajudando *-------*
    muuito agradecida pela sua boa ação em ensinar a nós que estamos começando a vida de blogueira. Sucesso.
    visitem meu blog: http://www.blogimfashionista.blogspot.com.br

    ResponderExcluir

© Blog da Nah | Oficial - 2012. Todos os direitos reservados. Criado por: Natália Médice. Tecnologia do Blogger. imagem-logo