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.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:
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
ótimo tuto
ResponderExcluirAdolescente Nerd
verdade
Excluir