Linkar Menu...

Olá gente,
Lucas falando!
Bom... Como muitas pessoas já me pediram, eu vou ensinar como linkar um menu com truque básico de coordenadas (Image-Maps). Bem, primeiramente, vocês devem fazer um menu (ou ter um já feito). Observem um exemplo de um menu já alinhado ao cabeçalho:

(Clique para ampliar)

Bem, agora, vamos linkar cada parte que está no Menu (Home | Parceria | Contato | Equipe | Sobre). Primeiramente, vocês devem hospedar as imagens... São vários os sites de hospedagens existentes, Tinypic, Imm.io, Imgur, Imageshack, entre ouras. (Clique em cima de cada um para acessar).

Com a sua imagem hospedada, Clique Aqui para ir diretamente ao Image-Maps, e começar a Linká-la. Chegando no site, coloque o "Direct Link" no espaço que se encontra em branco. Mas, se não quiserem hospedar a imagem, no Image-Maps tem como pegar as imagens do computador. Observem:

(Clique para ampliar)

Logo após, uma mensagem aparecerá. Se ela disser que a imagem foi hospedada com sucesso, você deve clicar em:Ir para o Próximo Passo, que irei explicá-lo.

Pois bem, esse próximo passo é onde serão colocados os links. Na barra lateral, terá umas ferramentas para você. Se quiser linkar o menu mesmo, clique em Rectangle. Depois, aparecerá um quadrado, que é onde você bota o link que deverá aparecer quando clicar na imagem.

(Clique na imagem para ampliar)

Lembrando que deve-se fazer este processo do Rectangle em todas as partes do menu (Home, Parceria, Contato, Equipe, Sobre).

(Clique para ampliar)

Bem, depois que fizer em todas as partes do menu, você só deve pegar o código HTML. Para isso, clique em "Get Your Code", que se localiza na Barra Lateral. Depois, você deverá clicar em HTML Code.

Um código completo de HTML para página aparecerá. Você deve fazer umas alterações nele para ficar completamente ajustado para o blog. Apague o que foi destacado nesta imagem:

(Clique na imagem para entendê-la melhor)

Bom, agora, abram o Painel do Blogger na versão ANTIGA. Clique em Design, depois em Editar HTML, e, aperte CTRL + F e, procure pela seguinte Tag: div id='header'. E, cole ao lado, como mostra a imagem:

Agora, você deve terminar de ajustar o seu cabeçalho. Procure pela tag: /* Header e desça procurando por height. Ajuste para a altura do seu cabeçalho. Exemplo, se for 982x350, coloque a Height para 350.

Bem, depois disso é só salvar e visualizar seu blog.

Recomendo que faça tudo antes em um blog de testes, caso não dê certo!!!

Bem, até a próxima! Feliz Dia da Terra, e Preparai-vos para uma Festa Épica!

>> Lucas, Penguins Designer <<