1 de ago de 2012

3º dia da Semana de Goodies: Menu no Cabeçalho


Oiii pinceladoras tudo bem?? Hoje é o terceiro dia da semana de goodies, estão gostando? Bom, hoje eu trouxe um tutorial difícil mas bem útil. É o de colocar o menu dentro do cabeçalho. Vamos conferir?



Pra quem não sabe o que vamos fazer é isso:



Estão vendo? O menu fica dentro do cabeçalho como no Cherry Bomb.

O Tutorial

Eu vou dividir o tutorial em partes pra vcs entenderem melhor ok?

1ª parte-Conteúdo

Faça todas as páginas que pretende por no cabeçalho e deixe elas "guardadas"

2ª parte-Modelo

Bom, agora que você tem as páginas e o nome delas, você tem que fazer seu cabeçalho. O cabeçalho será um cabeçalho normal.

P.S:Não se esqueça de colocar o lugar aonde vão ficar suas páginas ;)

3ª parte-Adeus

Para colocar o novo banner que será com o menu, você vai ter que retirar o banner antigo e o espaço que ele ocupava. Para isso siga os seguintes passos:

P.S: Se você tinha um cabeçalho de imagem antes, retire ele

Agora vá em seu HTML, para fazer isso clique em:

Modelo → Editar HTML → Prosseguir

Depois marque a opção expandir modelos de widgets.

Agora dê um Ctrl + F ou um F3 e pesquise por /* Header

Você irá achar isso:

/* Header
----------------------------------------------- */
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 10px;
  padding-right: 10px;
}
.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
}
.Header h1 a {
  color: $(header.text.color);
}
.Header .description {
  font-size: 130%;
}


Apague tudo, e troque por isso:

/* Header
----------------------------------------------- */
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 10px;
  padding-right: 10px;
display: none;
}
.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
display: none;
}
.Header h1 a {
  color: $(header.text.color);
display: none;
}
.Header .description {
  font-size: 130%;
display: none;
}


Agora aperte em visualizar e se seu cabeçalho tiver sumido aperte em salvar. 

4ª parte-Mapeando

Agora,você irá mapear seu banner. Bom, essa parte é a mais complicada. Primeiro, entre nesse site e faça o upload do seu banner, ou coloque a URL dele. Depois clique em "Start Mapping your Map". Agora você espera um cronômetro chegar no 0 clique em "continue to next step".
Agora, sua imagem vai aparecer. Clique em retangle e selecione o que você vai querer colocar o link. Você deve fazer isso com cada página até que todas estejam linkadas. Você deve colocar o link aonde está escrito: "links for this map" e clique em salvar.
Agora, aonde tem aquela barra do lado, você deve desmarcar as seguintes opções:


•Base URL
•Show Text Links
•Allow Backlink

Agora clique em Get Your Code, e na pagina que aparecer clique em HTML:



Copie o código.

5ª parte-Novo Banner

Agora, adicione um gadget de HTML/javascript no lugar do banner. Salve e prontinho, veja se tudo funcionou :)

Beijinhos, espero que tenham gostado do tutorial e que ele funcione.

Créditos:

_Aninha



2 comentários:

Olá, aqui temos uma Mini F.a.q pra te auxiliar:

-Não aceitamos Tags e Selinhos
-Precisa de uma Postagem? Pode comentar :)
-Afiliação? Somente na página sobre como se afiliar. Pedidos nos comentários serão desconsiderados
-Por favor, sem xingamentos para o bem de todos
-Nunca deixe a URL do seu blog no final do comentário, o blogger considera isso SPAN e exclui seu blog :(
-Por favor não plageie.
Mais alguma pergunta? Comente aqui ou Leia nossa F.a.q completa

Obrigada