✘ Fazendo seu template: Parte I

So what are you gonna do when the world don't orbit around you?



Hey lindos e lindas :3

Hoje o dia está chuvoso, e eu chorosa. O fato é: Eu odeio dias de chuvas,  fico deprimida, jogada pelos cantos, me dá vontade de não sair da cama, mas aqui estou eu. Tirei 10 na prova de história, e isso foi o suficiente para me animar e me tirar da cama, embora lá no fundo da minha áurea inspiradora (sqn) algo me fala subitamente para voltar para a cama e dormir mais um pouco. Hoje estou meio poética, não?

Resolvi fazer um tutorial de como fazer um layout. Quando comecei com meu primeiro blog, demorei séculos para achar um tutorial. A maioria eu não entendia nada, tudo muito complexo e complicado. Então eu resolvi fazer esse tutorial. Já vou avisando que não vou postar tudo de uma vez. Vou postar uma parte em cada dia, e por meus cálculos, provavelmente vou dividir em 4 partes. As partes vão ser um pouco longas, até porque eu não tenho o tutorial de todas as coisas no blog, eu vou ter que passa-los para vocês e quero que fique tudo bem explicado.  Não é complicado, mas se você não ter força de vontade e se você não ser bem atento, seu template vai ralo abaixo. Vamos começar?


Vamos começar do zero, ou algo pode dar errado. Vá em modelo > Personalizar e selecione o modelo travel/viagem (que é mais ou menos o "padrão" que os blogueiros usam) com a variação dois, que é esta com o x marcado.



Depois vá em plano de fundo e coloque um de sua preferência (eu usei este aqui) e salve. Agora que colocamos o background, vamos tirar a bordinha feia, que é esse fundo tipo um papel amassado. Para isso, vá em modelo > editar html e procure por .content-outer .content-cap-top { abaixo dele, vai ter um código assim:

.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);
}

Apague-o e cole no lugar:

.content-outer .content-cap-top {
  height:
  background:  repeat-x scroll top center;
}
.content-outer {
  margin: 0 auto
}
.content-inner {
  background:
  background-position:
  background-color:
}

Visualize e salve. Depois de fazer tudo isso, seu template deve estar assim:




Agora vamos colocar o fundo das postagens. Vá em modelo > personalizar > avançado > Plano de fundo da postagem e escolha a cor. Eu recomendo branco, afinal em todos os layouts o fundo é branco, tirando os escuros, mas o objetivo aqui é um layout claro. Salve. Agora faça uma postagem de teste. Coloque imagem, link, blockquote, sublinhado, negrito, enfim, tudo. Se você seguiu todos os passos, seu template deve estar assim:




Agora vamos remover a navbar, que é essa barrinha no topo do blog. Para isso vá em layout > navbar > desativado > salvar e você vai ver que a navbar vai desaparecer, assim:




Agora finalizamos a primeira parte, e amanhã vou postar a segunda. Espero estar ajudando os iniciantes com html. De primeira parece um bicho de sete cabeças, mas na prática é tudo muito simples >< 
Qualquer dúvida, deixe um recado nos comentários ou na minha ask :3


28 comentários:

  1. Meu Deus que blog lindo, seguindo.

    ótimo tutorial, esses tutoriais explicados assim são ótimos.

    Adolescente Nerd // Oficial {}

    ResponderExcluir
  2. Eu amo seu blog é tudo tão diwo aqui sabia??!Psé pura verdade!
    Eu tenho preguiça de fazer o meu própio heuheuehuehu'~

    Beijokas ;3 ,

    Meninas de Atitude

    ResponderExcluir
    Respostas
    1. Sério? Eu olho outros blogs e penso "ah se meu blog fosse assim". ahuah fico feliz que as pessoas gostem do meu lay :))

      bjs :3

      Excluir
  3. Ótimo tutorial, lindo blog (Hayley diva haha)
    - blogthistime.blogspot.com

    ResponderExcluir
  4. Odeio chuva. Tirei 10 em história também, uahsdujasdh toca ae o/
    Ameio o tutorial, bem explicado, com certeza ajudará muitos iniciantes.
    Beijos ~


    winter--html.blogspot.com

    ResponderExcluir
  5. eu também odeio chuva, e sou apaixonada por historia e já tirei 10 em historia também
    amei seu blog já estou te seguindo
    http://mundorealdegarota.blogspot.com.br/

    ResponderExcluir
  6. Parabéns pelo tutorial, e ah, não gosto de dias chuvosos, me desanimam.

    http://papodemeninasaer.blogspot.com.br/

    ResponderExcluir
  7. Bom Tutorial, e bem explicado ajudará bastante os iniciantes em seus layout´s <33

    worldofthel.blogspot.com.br

    ResponderExcluir
  8. Adorei seu blog!! super divo >< paramore <3 seguindo seu blog ><

    obg pela sua visita lá no blog,beijos.

    Choconut

    ResponderExcluir
  9. Bem facinho essa parte , as outras são meio complicadas mas vai ficar lindo! explica muito bem

    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
  10. Muito útil a dica *-* amei ! Obrigada por sua visita ao meu blog...Gostei muito do seu :3 Já até estou seguindo rsrsrs :3

    Quando puder dá uma passadinha no meu blog, tem post novo lá, convido você e seus leitores a darem uma conferida *u*

    Beijocas de Morango!!! ❣

    http://sorriso-jovem.blogspot.com.br

    ResponderExcluir
  11. vou dar uma olhadinha, talvez eu participe u.u

    ResponderExcluir
  12. ' Quando entrei na blogosfera, também era assim, e acho que sou até hoje ahuahuah sempre procuro tutoriais assim, muito útil :3

    ~ Beijos ;*
    cantinhodaslovelys.blogspot.com.br

    ResponderExcluir
  13. Que legal o post, Hay!
    Logo que criei meu primeiro blog, não sabia nada de html mas, com a ajuda de alguns blogs (o Cherry Bomb me ajudou muito!) consegui fazer uns ajustes aqui e ali. Espero que a maratona ajude muitos blogueiros iniciantes ;)

    Beijos ♡
    World Cutest | Twitter do blog | Twitter pessoal

    ResponderExcluir
  14. adorei este big tutorial muito bom..........adorei visitar>>bjo<>

    http://louca-por-html.blogspot.com.br/

    ResponderExcluir
  15. Adorei o seu blog querida, tudo muito bem feito por aqui,ótimas postagens e fotos querida ^^

    Adoro blogs com esse assunto.
    Tenha certeza que irei indicar o seu blog para as minhas leitoras e amigas.

    Também sou blogueira do Não Vivo Sem Esmaltes, um blog que fala sobre maquiagem, perfumes, cosméticos e tendências.
    BEIJOOOS

    JÁ ESTOU SUPER SEGUINDO AQUI, SE VOCÊ QUISER VISITAR E SEGUIR O MEU BLOG TAMBÉM:


    WWW.NAOVIVOSEMESMALTES.COM

    ResponderExcluir
  16. Super curti o tutorial!
    Amo todo esse tipo de dicas :)
    Seguindo aqui amore!
    Beijinhos
    Rubia =^.^="Unhas de Gato "

    ResponderExcluir