Editando o Modelo Travel do Blogger

Um dos passos mais importante para se ter um bom blog, além de conteúdo, é o design dele.
Editar os Modelos do Blogger pode difícil quando não se tem total conhecimento em HTML & CSS ou quando se está começando a aprender. Neste tutorial ensinaremos a como remover e editar algumas partes essênciais do código para que você consiga personalizar seu blog mais facilmente.

Escolhendo o Template

1 Vá até Modelo > Procure pela categoria Viagem > Selecione a opção destacada na imagem e aplique ao seu blog.


Editando os códigos no CSS

2 Ainda em Modelo, vá em Editar HTML > Clique na caixa de código > Aperte F3 ou Ctrl + F > Procure por .content-outer .content-cap-top { > Apague os códigos que estão destacados a seguir:
.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);

}
3 Procure por .main-inner .column-right-inner { > Apague os códigos destacados a seguir:
.main-inner .column-right-inner {
  margin-left: $(content.padding);

}
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);

  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
.main-inner .column-left-inner {
  margin-right: $(content.padding);

}
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
  margin-right: $(content.padding);

  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
4 Procure por /* Tabs > apague o código destacado a seguir:
/* Tabs
----------------------------------------------- */
.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}
5 Agora procure por .main-inner { e abaixo deste código, cole:

6 Salve.

A partir de agora você pode editá-lo como quiser!
Compartilhe no Facebook
Compartilhe no Twitter
Compartilhe no Google+

8 comentários, comente também!

  1. Adorei o tuto!
    Alan, queria saber aonde você disponibilizou esse layout, por que quero usar >> http://believeinyourdreamsjdb.blogspot.com.br/
    Beijos

    ResponderExcluir
  2. Gamei no tutorial :) ..... Irei usar pra fazer meu lay novo :)

    Abraços >.<

    ResponderExcluir
  3. Adorei as dicas, e o blog tem um conteúdo muito bom, vou tentar acompanhar! ~Sam
    t-eenage-d-ream.blogspot.com.br

    ResponderExcluir
  4. Karolline15/11/13

    Hey,muito legal tdo isso >< amo muuito o WHH ,mais eu queria saber sobre os outros laays,onde podemos encontra-los?
    Obg><

    ResponderExcluir
    Respostas
    1. Eles foram excluídos...

      Excluir
    2. Karolline15/11/13

      Awwn :( Que triste

      Excluir
  5. Nossa, me ajudou horrores! Obg!

    ResponderExcluir
  6. me ajudou muito!!!
    segue aqui estou começando agora->->->http://favela-chic.blogspot.com.br/

    ResponderExcluir

• Peça tutoriais em 'Contato'
• Comente com o link do seu blog para que eu posso visita-lo
• Você pode usar as Tags negrito, itálico, links...

Créditos



O Projeto Aurora foi criado completamente, com tutoriais disponíveis no blog, por mim, Alan Felipe Jantz.

Para as postagens 'reblogadas', os créditos do local de origem dos tutoriais está no final da postagem.

Todos os ícones utilizados neste template foram pegos no flaticon.com, todos os direitos reservados para os autores dos mesmos.





Algo que é seu está aqui, mas não foi creditado?
Entre em contato clicando na aba 'Contato' do menu para receber seus créditos!
BouquetNOVO
The Only ExceptionNOVO
Wide AwakeNOVO
Simple BaseNOVO
NatureNOVO
Why so Pink?NOVO
Why So Blue?NOVO