Como criar uma base para layout

23.5.12 | | |
Olá milk shakes de morango com pedaços de chocolate *-*
Hoje estava vendo os comentario aqui do blog , e teve uma menina que me perguntou como fazia um layout. Hoje vou ensinar a fazer A BASE de um, ultilizando o modelo Travel, que o blogger disponiliza. espero que gostem. vamos lá ?
Primeiro , obviamente, você vai em Modelo → Personalizar.
Coloque no modelo travel,e selecione o SEGUNDO modelo dele
Depois você vai na aba AVANÇADOS, e procure nela o Plano de Fundo da postagem e deixe ele com a cor branca 
 
Agora vamos mexer no HTML, para retirar algumas coisas que as vezes estragam o template.
Vá em modelo → Editam HTML
dê um CTRL + F e procure por .content-outer .content-cap-top {
Logo abaixo desse código, você irá apagar o que está marcado na imagem :
Entendendo: apagando esses códigos, você irá retirar as ondinhas lá do começo,irá tirar o fundo do cabeçalho e algumas outras coisas. ao finalizar este procedimento , seu lay vai ficar assim:


Agora , vamos retirar a navbar e o espaço dela.
vá em Design > Editar HTML > Tecle Ctrl + F > Procure por <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>.Caso você nao achar procure por <body class='loading'>
Depois de achar um dos dois , cole ANTES deles esse codigo:
<!-- Navbar-->
<script type='text/javascript'>
<![CDATA[
<!--
/*<body>*/
-->
]]>
</script>
<!-- Navbar--> 
Salve, mais não feche o negocio do HTML.Depois, vai aparecer um aviso perguntando se você quer excluir a navbar e você colocar em Excluir Widgets
Pronto , mais um processo concluído.



Agora, se você quiser retirar o espaço entre os gadgets e as postagens, tecle CTRL +F e procure por .main-inner .column-right-inner { , e logo abaixo dele, apague os codigos destacados na imagem:
Agora Salve as alterações. 


Vamos colocar um cabeçalho. vá em Layout e clique em editar cabeçalho (avá)
Faça o upload da imagem, marque a opção Em vez do título e descrição e salve.
Depois voltaremos no HTML , para retirar o espaço entre o cabeçalho e o corpo do blog.
De ctrl + f e procure por  /* Tabs
você vai ver esse codigo:
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}
Apague o trexo onde está em itálico ( margin: 1em 0 0;
dê ctrl f de novo e procure por .main-inner {
Logo abaixo desse código, você vai acrescentar essa linha: margin-top: -20px;
Agora é só modificar o número (20) até ficar do jeito que você quer. Altere o número e vá visualizando até não sobrar nenhum espaço. 
Se você quiser aumentar esse espaço, é só tirar o sinal de menos (-). Depois é só salvar
Agora é só você soltar sua criatividade,e personalizar o layout do seu jeito! espero que tenham gostado do tutorial.

 aqui vão os creditos dos tutoriais usados:
[www] [www]

14 comentários:

  1. que fooooooooooooooooooofo o blog!
    encantosdeumaadolescente.blogspot.com

    ResponderExcluir
  2. aaaaaaaaaaaaaaah apaixonei pelo lay novo *-*
    http://kawaiilovedesigner.blogspot.com.br/

    ResponderExcluir
  3. Adorei, ótima dica para quem n sabia ainda.. ^_^
    http://fashionemcores.com

    ResponderExcluir
  4. OMG, adorei o big tutorial, vai ajudar mt mt mt gente. Ficou super bem explicadinho em!

    Beeeijos
    #Nhaaac >>>http://the-lovers-official.blogspot.com/

    ResponderExcluir
  5. Nossa nesse tempo que eu to fora da blogosfera esse blogs ta mais perfeito ainda Dédé parabéns flor,Ta lindo aqui ta muito cute o lay ^^ ... Queria perguntar se você aceita afiliação num blog que eu posto ele chama Geração Cupcake se aceitar coloque nós aqui por que já to colocando lá ai se vc não aceitar me avise para tirar de lá

    #Bezos
    o blog~~> http://geracaocupcakes.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada amore ! e sobre a afiliação eu ja respondi lá ok ?
      XOXO

      Excluir
  6. ela só sai se agente fechar a janela do html mais ai perde tudo

    ResponderExcluir
    Respostas
    1. é porque antes de você fechar a janela do HTML , você tem que salvar as alterações :D

      Excluir
  7. Oi Dedé! Seu blog, é muito bonito e bem organizado, parabéns!!! Eu usei um código e fiz um tutorial, no meu blog, se não tiver problema, mas te creditei, ta bem?. Gostaria que visita-se meu blog! Obg!

    http://blog--meninama.blogspot.com.br/"

    ResponderExcluir
  8. Valeu me ajudou muito amiica Beijos Loli.
    http://meus-loucos-pensamentos.blogspot.com.br/

    ResponderExcluir

Por favor, mande apenas seu comentário SOBRE O POST e o link. se alguem pedir tipo assim : "nunca teria coragem.Agora vou te convidar a conhecer meu blog, eu ja estou seguindo se puder retribuir rs linkdoblog.com " ISSO ME IRRITA MUITO CARA! por isso eu nem visito. eu retribuo todas as visitas, apenas deixe o link por favor! obg