Image Map
  • Pullips
    http://i25.photobucket.com/albums/c98/nanadorough/teste000001_zps3f1d850a.png
    Clique e conheça mais sobre estas encantadoras dolls! Leia Mais...
  • Rainbow Cupcake
    http://i25.photobucket.com/albums/c98/nanadorough/teste000002copy_zps036529c7.png
    Aprenda aqui como fazer a lendária receita de cupcake arco-íris! Leia Mais...
  • Backstreet Boys
    http://i25.photobucket.com/albums/c98/nanadorough/teste000005_zpsb518dd09.png
    Leia neste post como esta incrível banda faz parte da minha vida há mais de uma década e a minha saga para conhecê-los! Leia Mais...
  • Britney em imagens raras
    http://i25.photobucket.com/albums/c98/nanadorough/teste000004_zps8cfbd2dd.png
    Veja aqui imagens raras de Britney Spears em sua trajetória pessoal e profissional. Leia Mais...
  • Salvador
    http://i25.photobucket.com/albums/c98/nanadorough/teste000006_zpscada8fdb.png
    Veja aqui imagens desta terra encantadora e cheia de luz! Leia Mais...

26 novembro 2012

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,

11 comentários:

Viviane Camacho disse...

Esse tutorial me será muito util. Obrigado pela dica.

Dudu disse...

Meu comentário: Ô-ô-ô!

Te amo!

Vitória disse...

Oii, eu fiz o tutorial, mas no meu meu HTML de cima do post não funciona, só no da sidebar! O que eu faço pra mudar isso? Beijos, blog ETC

Anônimo disse...

Muito bom o tutorial,foi muito util! =)
minhas-confissoes-2012.blogspot.com

Unknown disse...

Ameei o seu tutorial , sabe o que é a pessoa entra em 500 blogs e não consegui fazer ? Então , esse foi meu caso , nenhum blog que eu entrei explicou tão bem quanto o seu. Adorei mesmo de verdade ' Me ajudou muiito mesmo.Já até fiz no meu blog ! Amei de paixão '

Unknown disse...

MUUUUUUUUITO BOM AMEEEEI parabens amor obrigada pela grande força mas eu tenho uma duvida eu não to conseguindo enquadrar ele direitinho :s ele fica pra baixo e torto da uma olhada www.gangdobatomvermelho.blogspot.com.br sera q tem como me ajudar?

Anny disse...

Oi , no meu tem '' < H e a d >
(tudo junto )
Mais não tem

(Tudo junto )

pq isso acontece?
Ajudaaa

Unknown disse...

Caaaaaara...! Que perfeito! Vi váááários tutoriais pra fazer isso... Nenhum ia, só com o seu que foi! Valeu :D
http://palavrasnagarganta.blogspot.com.br/

Unknown disse...

Perfeito! Tentei com vários mais só aqui deu certo de verdade.... Obrigada!

Unknown disse...

você não tem idéia do quanto me ajudou, eu perguntei a muitas blogueiras e ela não me disseram como fazia esse: "mapeamento" muuuuuuuuuuuuuuuuuuuuuuuuuuito obrigada

Bi@ disse...

Incrível! Foi o tutorial mais bem explicado que já vi!! A maioria sempre explica pela metade.
Amei!

Só que tem uma coisa, quando eu vou Obter o código, aparece uma mensagem:"A atualização da página que você vai começar de novo. IE 7 vai dar um erro de estouro de pilha depois de 13 ou 14 mapas retângulo, Firefox 3 não."
O que isso significa? Será que é porque eu não tenho Firefox? Por favor, alguém me ajude!
Beijinhos!

www.blog-dreamsofagirl.blogspot.com

Real Time Web Analytics