Tutorial: Menu no cabeçalho

Ooooi, gente!

O nosso post de número 102 vai ser um tutorial.

Isso mesmo!

E um tutorial bem útil pra quem quer dar um up no visual do blog e baixar a "Taxa de Rejeição" do blog (cujas dicas você confere aqui), já que você colocará as opções de navegação (menus) já no cabeçalho (primeira coisa que o seu leitor vê ao acessar seu blog)!

Pra quem não entendeu como funciona o menu no cabeçalho, basta voltar ao cabeçalho do meu blog! Vou colocar o print mastigadinho pra você não ter nem que subir a barrinha de rolagem!

Note que eu "subi" e incorporei ao cabeçalho as páginas do blog.Você pode incorporar outros links como fiz com a Fan Page do Facebook, Instagram, Flickr e link pro meu outro blog!

Vamos à construção deste cabeçalho?!

Digamos que os passos em si são bem simples. Trabalhoso mesmo é o processo!

Mas vale a pena!

Este será um tutorial beeeeem explicadinho, passo a passo sobre como fazer o cabeçalho com menu!

Se seguir direitinho o que eu vou falar aqui, tem erro não!

Well... Primeiramente, você vai ter que construir seu cabeçalho no Photoshop ou em qualquer outro programa decente de edição de imagem! (Não me vem com Paint, pelo amor de Jesus!)

As dimensões do meu cabeçalho são: 1874 X 913. (Daí você me pergunta: Como ela chegou a este número? Justo este número? E eu respondo: Depois dos testes que eu fiz, ia ser 1800 X 900. Porém, enfiei tanta coisa no cabeçalho que resolvi aumentá-lo. Simples assim!

Não se esqueça: Seu cabeçalho deve conter todos os itens presentes no seu já existente menu! E onde que você olha isto? Lá nas páginas que você criou (e que já estão publicadas no blog).


Na verdade, você vai "deslocar" as páginas, atualmente distribuídas em abas, acima da postagem, lá pra cima, no cabeçalho, sacou?!

Lembre-se: Quando estiver compondo o Menu dentro da imagem no cabeçalho, relacione todas as páginas. Lá na frente, você vai entender como colocar o link pra cada uma delas, ok?!

Uma dica: Crie sua imagem com fundo transparente.

Por quê? Porque aí aparecerá o fundo do blog e não dá aquela aparência "cortada", parecendo que o blog é um grande "puxadinho" que você foi encaixando elementos.

O fundo transparente dá a aprência de sobreposição. De que seu cabeçalho faz parte do blog, mas sem "brigar" com o fundo!

Daí você me pergunta: Por que salvar a imagem do cabeçalho em PNG e não em JPEG?

A grossíssimo modo, te respondo: Porque em PNG há a preservação da transparência (que a gente tanto quer pro cabeçalho), em JPEG não.

Enfim, salva a imagem, vamos à hospedagem dela.

E aí você me pergunta de novo? Pra quê hospedá-la em um site?! E eu te responderei mais adiante.

Por agora: acesse: http://beta.photobucket.com/ (ou qualquer site que hospede imagens), faça seu login (caso não tenha conta lá, crie uma, é rapidinho) e faça o upload do seu cabeçalho!

Guarde por enquanto o link que você obteve no Photobucket, pois você precisará dele agora mesmo!

Agora vamos à "mágica": Como fazer pra colocar link dentro do cabeçalho?! Pode isso, Arnaldo?!

Pode sim e se chama: Mapeamento de Imagem!

Com este recurso, você torna os itens de seu menu "clicáveis" já que ele alia as partes selecionadas da imagem do cabeçalho aos links que você desejar!

Achou "daora"?

Bora fazer então!

Acesse: http://www.image-maps.com/ (O trem é tão bom, que precisa nem criar conta!)

Você vai encontrar esta interface aqui. Siga as minhas instruções!

DICA: O link que você tem que pegar da imagem no photobucket é o "Direct link" (ou seja, o segundo das opções que aparecem à direita da tela). Qualquer dúvida, mande uma mensagem pela aba "contato", que eu esclareço!

Após clicar no botão, indicado, aparecerá esta tela aqui:

Fim de upload, clique onde indica a "setinha" e comecemos de vez o mapeamento!

 

 Bom, vai abrir esta tela aqui: Na maior parte dela, a imagem do seu cabeçalho, no canto direito, as opções do mapeamento.

Vamos a elas!

A primeira coisa a se fazer, quando ver esta tela é desmarcar todas as opções e deixar marcadas apenas as duas a seguir:

E agora começa o mapeamento em si. Basta seguir o que eu disser nas imagens. Para ver em tamanho maior, clique nelas.

Preste bem atenção nestes passos a seguir!

Terminou?

Hora de pegar seu código! Clique no local indicado:

E depois neste campo que indiquei com a seta.

Copie e cole o código em seu bloco de notas e vamos à parte final: A instalação de seu cabeçalho no blog!

Primeiramente, você precisa retirar o cabeçalho do seu blog. Como?

Há duas maneiras!

A primeira:

Pronto, você não tem mais cabeçalho!

Ah, teu cabeçalho não aceitou ser excluído desta forma?!

O que fazer agora?!

Relaxa, venha para esta etapa aqui (segunda maneira):

Repito: NÃO DEIXE DE SALVAR UMA CÓPIA DO CÓDIGO DE SEU LAYOUT, OK?! Fazendo isso, você pode mexer com segurança, sabendo que poderá voltar o blog ao que era antes, caso algo dê errado!

Aberta a edição, faça o que está descrito a seguir:

Pode ser que apareça a mensagem de que não é possível prosseguir a edição sem o cabeçalho. Dá nada não, clique confirmando a alteração que dá certo sim. O cabeçalho é removido!

Sem cabeçalho (por uma das duas maneiras de se retirar) vamos à inserção do novo cabeçalho:

Adicione o gadget "HTML/Java Script" e siga os passos abaixo:

 Prontinho!

Você agora tem um cabeçalho com menu integrado!

Gostaram?!

Espero que sim!

Dúvidas?! Mande um "alô" que eu esclareço!

Com carinho,