Menu dentro do Cabeçalho


Oi lindos ♥ vocês devem estar confusos com o título: "Como assim Menu dentro do Cabeçalho"
Bom, esse tuto é bem fácil, através de um site você transforma uma imagem em um tipo de Menu, e que você pode usar como cabeçalho fica bem legal. Caso você não entendeu, clique aqui para ver a preview. Rele em Contato, e no F, quando você clica ele automaticamente vai para outra guia, ou seja, pode ser usado como  um Menu. Vamos aprender? 

1::Primeiro, faça uma imagem (menu) que deseja ( Recomendo você fazer no Photoshop ), eu irei usar essa. ( O próximo post será sobre como fazer uma imagem dessas pelo PS, ok? )
Agora, entre nesse site, e clique em "Escolher Arquivos" e, obviamente, abra sua imagem. Depois, clique em: "Start Mapping Your Image".
Agora, abriu uma guia  com uma contagem de 10 segundos, não é? Depois de esperar os 10 segundos, clique em "Continue to next step", aí vai abrir outra guia. Agora sim vamos começar:
1º Clique em "Rectangle", e, no canto da guia, vai aparecer um quadrado.

2::Agora, arraste esse retângulo para o lugar que você queira que contenha um link. No meu caso, eu coloquei 3 retângulos, Um no "Home", "Goodies", e "Contato".
3::Bom, agora sim é que vamos colocar o link nas imagens: Clique no retângulo, E na primeira barrinha, coloque o link que deseja que vá, ao clicarmos. Na segunda, coloque o Título, o título seria o texto que apareceria ao relar no quadradinho, exemplo. Agora clique em Save. ( faça isso com todos os retângulos ). 

4:: Recomendo que tire dessa opção ( número 1 na imagem ) pois ela deixa uns textos que não precisam ficar na imagem. Depois de fazer tudo isso, clique em "Get your code" ( Número 2 na imagem ).


5:: Por fim, irá aparecer uma outra guia ( quantas guias e.e ) e aí, você vai clicar na opção "HTML Code", copie o código e cole em um Gadget "HTML/Javascript", deixa Nesse lugar ( cabeçalho )

 Foi muito difícil de entender? Dúvidas?  Funcionou? Comente!



2 comentários:

  1. Adorei o tuto, estava precisando, agora só aprender a deixar esse menu dentro do cabeçalho com efeito hover.

    http://inventyourhappiness.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada! Aqui o tuto http://htmlandresources.blogspot.com.br/2013/09/menu-hover.html

      Excluir

Regras:
-Aceito críticas, porém, comentários ofensivos/maldosos serão apagados.
-Não aceito mais: Seguindo, segue de volta?
-Coloque o link de seu Blog no fim do comentário, é garantido que irei visita-lo e dependendo do conteúdo, até posso segui-lo :3
-Comente a vontade!