Aprendendo a Editar um Layout: Parte 1

by - julho 20, 2013


Devido a ter visto muitas blogueiras pedindo ajuda, por não saber nada de html, ou 
até mesmo não sabendo editar imagens, nem o básico, vou fazer essa série de posts.
Espero que ajude várias meninas.


1- Para não haver problemas se ocorrer algum erro, primeiro crie um novo blog,
para apenas desenvolver o layout, com um nome qualquer.



2-Depois de ter criado, vá em Modelo e logo após, Personalizar.
Agora vamos escolher o modelo, Sabe aquele modelo Travel (viagem) que todo mundo usa para fazer Templates? Pois é, aposto que você também quis usar ele e viu que tem um fundo de papel amassado e desistiu.
Mas vamos usa-lo.




4-Antes de retirarmos esse fundo de papel amassado ridículo,  temos ainda que fazer algumas 
alterações básicas:

Plano de Fundo>> Remover imagem
Ajustar larguras>> Recomendo que deixe 1000px e 310 px
Layout>> O segundo da parte superior

Avançado

Planos de fundo: 
Plano de fundo externo(escolha uma cor clara)
Plano de fundo principal: Deixe transparente

Plano de fundo da postagem: Deixe Branco (ele está transparente)

Plano de fundo da barra lateral:
Cor do plano de fundo: Deixe transparente
Cor da moldura: Deixe transparente.

Agora aplique ao blog e visualize:



5- Agora iremos retirar o fundo de papel amassado.
volte para o painel do blog.

Modelo>> Editar Html
Clique em qualquer letra dele, e depois aperte Ctrl+f
e procure por:
content-outer .content-cap-top {


.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);
}
.main-inner .date-outer {
margin-bottom: 2em;
}

Apague as partes destacadas  (não esqueça de DEIXAR as vírgulas).
Salve e visualize.

Agora vamos retirar o navbar:
No painel do blog vá em layout>> Editar Navbar>> Desativado>> Salvar


Bem, isso é o básico do básico, aguardem até a parte 2.

Share
Tweet
Pin
Share
Tags :

You May Also Like

9 Comentários

  1. ゆのチャン Gasai ♥20 de julho de 2013 às 12:05

    Ótimo tutorial ^w^
    Já fiz vários destes em meu blog ♥

    http://the-kawaiis.blogspot.com.br/

    ResponderExcluir
  2. Y20 de julho de 2013 às 12:40

    Haa muito obrigada por posta o tutorial me ajudou muito eu sempre quiz fazer um lay com o viagem mais nao conseguia por causa de uma barra do lado dos gadgets e ficava feio e o que eu uso n da ppra fazer muito bem o que eu quero
    Valeu mesmos
    bjss

    ResponderExcluir
    Respostas
    1. Gaby Misaki20 de julho de 2013 às 12:51

      Que bom que ajudou, fico muito feliz por isso -.-
      ~~Kissus

      Excluir
  3. Nanda-chan21 de julho de 2013 às 07:01

    Yoooooooooooooooo Gaby-chan *O*O*O*O* tudo bom ?

    AAaaah isso talvez vai me ajudar no meu próximo lay !!!!!!! Perfeito ! No modelo viajem dizem que é um dos modelos que tem como por borda ! Junto com o marca d' água e um outro láa ! Só que eu não sabia arrumar o Viajem ! *O* Agoooooooooooooooooora isso foi muito útil !!! Mais tarde provavelmente eu volto visualizando melhor e.e


    *O* AGOOOORA SOBRE AQUELE COMENTÁRIO QUE TU DEIXOU LÁ NO BLOG !!!
    http://xxotakulovexx.blogspot.com.br/2013/07/sobre-cosplay-passando-na-eliana-2011.html#comment-form

    Que tu disse que ama meu blog e que se sente bem lá ! T-T EMOCIONADA !!!!!!!!!!!!!!!!!! *OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO* FIZ UMA FESTA LÁAAAA ! >3<

    KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK ' ALEGRIA CONTAMINANDO TUDO AQUI ^^''

    Beeeeijoookas :3 , te desejo muita felicidade ! ( sério mesmo !!!!! *O* ) , abraaaaaaaaaçoooooooooos de ursoooooooooooooooooooooooooooooooooooo *O*

    ResponderExcluir
  4. Gaby Misaki21 de julho de 2013 às 07:40

    Esse modelo é o mais usado, por ser compatível com todos típos de códigos^^

    Ahh*---------------------*
    Eu ví^^ FIQUEI MUITO FELIZ=^.^=
    Sério mesmo*_*
    *--------------*

    Eu amo seu blog*----*
    Um dos melhores com conteúdo otaku que já vi^^

    ~~Kissus *3* Te desejo o mesmo ^^ *o*
    Outro em vc*-----*

    ResponderExcluir
  5. Anônimo23 de julho de 2013 às 19:05

    Yoo! Aqui é a Misa Misa, é em outros tutoriais ninguém escreveu que era pra clicar qualquer lugar do quadro, então quando FINALMENTE CONSEGUI fiquei boquiaberta por segundos

    ResponderExcluir
    Respostas
    1. Gaby Misaki24 de julho de 2013 às 11:08

      A maioria dos blogs, quando fazem tutoriais não se importam em explicar essas coisas, por que a maioria já sabe, expliquei dessa forma pois tinha em mente que as novatas na blogosfera não sabiam disso^^
      ~~Parece que acertei néhh srsrsrs
      ~~Kissus

      Excluir
  6. assim1820 de abril de 2014 às 07:20

    Bom dia *-*
    Ajudou muuito,muito obrigada mesmo!!!! Estava horas tentando tirar esse negócio horrível sem conseguir.

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença!
Ambos são super importantes para mim.

Kaomojis:
(*´∀｀*) (*≧∀≦*) (=´∀｀)人(´∀｀=) ( ･ ▽ ･)
ヾ(*^▽^*)o, ｡･ﾟﾟ･(>_<)･ﾟﾟ･｡ (＞ω＜；)＊(´∀`)ﾉﾉ＊
（。ゝω・）～♡ ﾍ(´∀｀ﾍ)ﾍ (╯°□°）╯•ᴥ• (´･ω･`)