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.

You May Also Like

9 Comentários

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

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

    ResponderExcluir
  2. 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. Que bom que ajudou, fico muito feliz por isso -.-
      ~~Kissus

      Excluir
  3. 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. 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. 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. 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. 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, 。・゚゚・(>_<)・゚゚・。 (>ω<;)*(´∀`)ノノ*
(。ゝω・)~♡ ヘ(´∀`ヘ)ヘ (╯°□°)╯•ᴥ• (´・ω・`)