Como colocar menu no cabeçalho

Muita gente me perguntou como por o menu que eu uso aqui no fs no cabeçalho , bom , vocês podem até saber uma parte , mais para dar certo no cabeçalho é preciso mais do que simplesmente mapear uma imagem .Querem aprender ?


1) Crie seu cabeçalho (de preferência no photofiltre stúdio) , e faça alguma coisa que destaque as partes que quer linkar , clique aqui e vejo o cabeçalho do Fashion scream .

2)Entre no site : image maps e faça o upload da sua imagem ou coloque por url e clique em 'start mapping your image' , vai aparecer uma pagina amarela e lá em baixo uma espécie de cronômetro , depois que chegar a 0 aparecera o link : 'continue to next step'

4) sua imagem irá aparecer,clique em 'retangle' e selecione SOMENTE a parte que você quer um link -uma a uma) depois de selecionada a parte na qual você quer um dos links irá aparecer uma paginazinha amarela em 'links for this map' você coloca o link e clique em salvar , para colocar o link em outros lugares repita esse processo

5)Depois de tudo pronto , em uma barra lateral no lado direito tem algumas seleções , desmarque essas (clique para ver a imagem)

6)clique em get your code , e depois em HTML code lá em cima (clique aqui para ver a imagem)


Depois de copiar o código , vamos editar isso no blogger
7)vá em design >elementos da pagina > e no gadget do seu cabeçalho e o apague
8)depois va em editar html >expandir modelos de widgets > procure por : /* Header


9) Depois de cada 'parágrafo' antes de fechar a chave '{'  você deverá colocar o seguinte código : display: none;
Deverá ficar assim :



/* 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;
}

Isso fará com que seu cabeçalho desaparecerá (o espaço a o título)

10) Vá em design >elementos da página > HTML/javascript e cole aquele código da sua imagem mapeada , coloque onde o gadget do seu cabeçalho ficava e pronto ! Lembrando que esse tutorial não serve somente para os links do blogger,mais sim para qualquer link da internet

Galera , espero que estejam gostando dos posts e principalmente dos tutoriais , queria pedir a vocês que não usem a c-box como chat , e agradecer a todos que votam na enquete >< além disso queria avisar que eu não faço mais parcerias ,somente afiliações , abrirei mais vagas para afiliados no próximo mês