6 de ago. de 2012

Como criar um Layout - Parte 02


Chegou a parte 02 da seção de tutoriais, essa parte completa trata da 
area do cabeçalho e menu,  ela completa a anterior 
e a próxima completa a essa, assim em diante. 
Espero que gostem! :D

Parte 02 - Header



Crie um cabeçalho de em média 1000x400, como esse abaixo, 
que tem um espaço para menu logo embaixo do titulo. Então hospede. 
Pessoalmente acho melhor hospedar no blogspot

No Html do seu blog, aperte CTRL+F e procure por:
/* Content
e encontre um código mais ou menos assim:
body {
  font: $(body.font);
  color: $(body.text.color);
  background: #6CCDD0;
Subistitua por esse código:

body, html {
 height: 400px;
 margin: 0;
 padding: 0;  }

body {
 font: $(body.font);
color: $(body.text.color);
background: url(IMAGEMDOCABEÇALHO); }
html {
 background: #6CCDD0; }

--Entendendo:
Na área em azul coloque a altura da imagem para o cabeçalho que você editou.
E na área rosa coloque o link da imagem do cabeçalho que você editou.
e na verde coloque o código da cor do background que você quer no seu blog.
caso você queira uma imagem substitua #6CCDD0 por: url(linkdobackground)

Procure por:
<b:widget id='Header1' locked='true' title='Teste (Cabeçalho)' type='Header'/>
O apague. Salve e depois aperte Excluir Widgets.


Depois disso você pode notar, que uma parte do cabeçalho, 
ficou embaixo das postagens e da sidebar, 
para resolver isso, procure por algo mais ou menos assim:


.main-inner {
  padding: $(content.padding) 0;
}

e coloque o código a seguir logo acima de }
margin-top: 255px;
--Entendendo:
A área em rosa deve ser alterada conforme o tanto que o cabeçalho esteja abaixo das postagens 
e sidebar, ou seja edite e visualize a cada alteração até encontrar um lugar certo.

Com tudo certo e ajeitado, Faça um menu como esse abaixo, 
do tamanho que você deixou no cabeçalho. E hospede.
Procure por:
<header>
e cole o código a seguir, logo acima:
<div class="alinhamento" >Coloque as tags criadas após a mapeamento do menu.</div>

Depois procure por:

]]></b:skin>
e logo acima cole o código a seguir

.alinhamento {
margin-top: 0px;
margin-left: 0px;
margin-bottom: -0px;
}
Alinhe o menu com as áreas em Rosa.
E a area em azul é a margin de baixo você tem que diminuir conforme 
a sidebar e as postagens vão ficando longe. Ou seja visualize sempre enquanto edita.


Pronto essa foi a parte da Header, 
Aguardem por mais.

Menu de navegação:
Parte 01 - Base | Parte 02 - Header | Parte 03 - Sidebar e Postagem | Parte 04 - Footer e Adicionais

11 comentários:

  1. Legal o tuto!Ansiosa para as outras partes !Aceito sim afiliação !

    http://macacor-de-rosa.blogspot.com.br/

    ResponderExcluir
  2. OMG!! Perfeito esse menu!!
    # http://chilipiink.blogspot.com.br/

    ResponderExcluir
  3. Obrigado Jelly, Eu já te linkei. :D
    -
    É mesmo Gabriela! vlw. :P

    ResponderExcluir
  4. Adorei o cabeçalho! *-*
    Ficou muuito lindo ^^ Principalmente com o menu dentro!
    Beeijos.

    > http://we-lovesweets.blogspot.com

    ResponderExcluir
  5. Ótimas dicas!! Vou usar para meu próximo lay!!^^!
    Um abraço!!

    ~> dicasblogspot-db.blogspot.com

    ResponderExcluir
  6. Sugooooooooi ~
    Amei *u* com certeza vou usar :3 *waah* seu bloguito és muito diwoso :3 (Seguindo :3) bom de qualquer forma aceita afiliação ? *ww* adogo fazer afiliação com blogs lindos >w< bom , se quiser avise-me por comentário por favor *w* mas se não quiser não faça nada u-u -s

    Kiss ~ http://dependentes-da-felicidade.blogspot.com.br/

    ResponderExcluir
  7. Vlw Bibi. :D
    -
    Haha' Muito obrigado nicolas.
    -
    Nossa. :D Que bom que gostou! @3@
    aceito sim! já te linkei. :)
    -
    Muito obrigado pessoal pelos comentários! :#

    ResponderExcluir
  8. Estava lendo o seu perfil e voce disse que tem poucos posts e verdade , mas somente este poucos posts ja esta de parabens .
    Amei o blog e
    Tbm o tutu super facil nao e ?

    http://blog-meninasmalucas.blogspot.com.br/

    ResponderExcluir
  9. Conheci o blog recentemente e amei!Sério,muito perfeito!
    http//balaio-sonhos.blogspot.com

    ResponderExcluir
  10. Amei esse tutorial demais haha, ótima explicação.
    Beijos,
    http://blogheyteen.blogspot.com/

    ResponderExcluir
  11. Obrigado Girlene! :3 Esse comentário me motivou muito!
    Fácil mesmo!
    -
    Obrigado Ana! :D
    -
    Obrigado Magali! :)

    #Vcs são demais pessoal!

    ResponderExcluir