Como colocar o Menu no Cabeçalho

                   

Oi meus churros de chocolate !
Trago hoje para vocês um tutorial que aprendi no blog que eu amo muito que é o Cantinho Backgrounds , a tuto é Como colocar o menu no cabeçalho.

Clique em "Leia Mais" para ver o tutorial completo!

Bom "pipol" (Eu sei que se escreve "people", rsrs'), em alguns blogs, fica dando um erro chato ao tentar excluir uma parte do HTML para poder funcionar o menu no cabeçalho. O AL (Apple of Love), por exemplo.
MAS EU DESCOBRI UM JEITO QUE FUNCIONAAAAA!!
(Para de dar uma de doida! Sua doida!)


Então, eu ACHO que em alguns outros blogs não está tendo esse erro, então irei postar apenas o tutorial que não precisa mexer com o HTML.




Tutorial:

Bom, você já deve ter o cabeçalho pronto com os lugares do menu na imagem.
Logo em seguida, vá neste site: Image Maps --> (www)
clique onde mostra a imagem e selecione a imagem do cabeçudo (que já deve está pronta)

Espere carregar os segundos.

E clique em "continue to next step"(continuar para o passo seguinte)

Espere a página carregar. Sua imagem irá aparecer no canto esquerdo (pra que está de frente para o PC) da tela. 

E agora? O que eu faço?

Simples! Clique em "Rectangle"(retângulo), que está localizado no canto direito da tela.

Irá aparecer um espacinho na sua imagem. Leve ele e deixe-o do tamanho que desejar. Posicione-o em cima de onde deverá ser clicado. Tipo, "Home"

Após fazer esse mesmo processo em todos os itens do seu menu, clique em"Get Your Code"(Obter o seu código)

Logo, espere carregar, e na parte superior da página, estará selecionada a opção "HTML Output". Clique na opção "HTML Code"

Um código estará disponível para você pegar.

Copie o código, mas ATENÇÃO: Copie somente até "</map>"

Então, abra o Bloco de Notas, e salve o seu código nele.

Agora, no seu blog, vá em Design >> Layout >> Designer de modelo

Espere carregar e vá em Avançado >> Título do Blog

Em "FONTE", você deixa o tamanho em "0px", e em "COR DO TEXTO"coloque "TRANSPARENT", como na imagem abaixo:

Ok, agora salve ("Aplicar ao blog").

Depois, volte ao Layout, e clique em "Editar" no Gadget "NOME DO SEU BLOG (Cabeçalho)"

Após abrir uma janelinha, vá na parte "Imagem" e selecione a opção "De seu computador", e deixe sem nenhuma imagem. (Caso você já tenha uma imagem, é só clicar em "Remover").

Em "Posicionamento", deixe em "Por trás de título e descrição".

Então Salve!

Não se preocupe se o Gadget não sumir, é assim mesmo. Agora, adicione um novo Gadget "HTML / JavaScript" logo abaixo de "NOME DO SEU BLOG (Cabeçalho)". Então, sabe o código que você salvou no Bloco de Notas? Vamos usar ele agora.

Copie ele e cole-o na área do HTML. Não se esqueça de uma parte fundamental depois que colar: coloque "</div>" no final do código para funcionar.

PRONTOOOO!! 

Agora é só salvar e ver como ficou!

Até o próximo tuto!

Qualquer coisa, é só comentar!