Tutorial:Como Colocar Menu No Cabeçalho.

Oi minhas balinhas de maçã verde, começando com a nossa 1ª edição de tutorial eba o/ -risos- vamos ensinar pra quem não sabe como colocar menu no cabeçalho, antes de ensinar espero que gostem,aprendi esse tuto no  Fashion Scream e vou explicar do jeito em que aprendi,espero que gostem dessa nova novidade do Place Teen. Vamos Começar!


Primeiro crie seu cabeçalho de preferência no photofiltre stúdio, mais pode ser também no photoscape e faça alguma coisa que possa destacar o que linkar,  clique aqui e veja o cabeçalho do Place Teen e tome como exemplo.


Depois entre no site : image maps  e faça o upload da sua imagem ou se quiser coloque por URL e em seguida clique em 'start mapping your image' , vai aparecer uma página amarela e lá embaixo uma espécie de cronometro depois que chegar a 0 aparecera o link :  'continue to next step' .


Em seguida 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


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


Depois 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
vá em design >elementos da pagina > e no gadget do seu cabeçalho e o apague
depois va em editar html >expandir modelos de widgets > procure por : /* Header


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)

 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

Créditos:Fashion Scream

Espero que tenham gostado ,e aguardem que vem por aí muitos outros tutos.