26 de set. de 2012

Hey, dudes :) What's up?

Não sei se vocês repararam, mas os cabeçalhos dos meus blogs (tanto daqui - Tutoriais Mrs. Nightshade - quando do meu blog pessoal - Mrs. Nightshade) estão mapeados. Que tal aprender a fazer igual?

Primeiramente, você tem que ter o seu cabeçalho já pronto. Eu recomendo que esteja em png e hospedado (no Photobucket, por exemplo).
Depois deve-se entrar no site Image-Maps, onde você irá mapear sua imagem (ou seja, colocar os links das páginas do seu blog na imagem).
Em "From a URL" você coloca o link do cabeçalho hospedado e logo depois clica em "Start Mapping Your Image" (destacado em vermelho):


Confira se a imagem que foi selecionada é a correta e espere alguns segundos até poder clicar em "Continue To Next Step" (circulado de vermelho):


Na caixa de "Image Map Tool Box" selecione a opção "Rectangle" (destacada em vermelho):


Faça retângulos na parte da imagem que você quer mapear (ou seja, quer que seja link para alguma página).  Em "Link For This Map" você coloca o endereço da página (o link) e você deve deixar vazio o campo "Title/Alt for this map":


Depois de ter mapeado toda a imagem deve olhar para a caixa nomeada de "Advance Tool Box". Lá, desmarque as opções "Base URL", "Show Text Links" e "Allow Backlink" (mostrados em vermelho) e logo depois clique em "Get Your Code" (destacado em vermelho também):


Assim que carregar, clique na opção "HTML Code". Copie até "</map>":


Agora você deve colocar o cabeçalho no blog, correto? Bom, primeiro vá no seu código HTML e aperte "Ctrl+F", buscando por "Header1". Apague a parte do código que será parecido com isso:

<b:widget id='Header1' locked='true' title='Titulo do Seu blog (Cabeçalho)' type='Header'/>

Se seu cabeçalho sumir, salve. Vá em "Páginas" e selecione para que elas não sejam mostradas (em "Não Mostrar"). Agora vá na opção "Layout" e adicione um gadget de HTML/Javascript. Cole o código e clique em "Salvar". Pronto: seu cabeçalho mapeado já está pronto e colocado no seu blog!

Dica: Caso o seu nome ainda ficar presente como Titulo do Blog e você não conseguir retirar, aconselho a fazer o seguinte: Modelo > Personalizar > Avançado > Titulo do Blog. Para fazer o titulo sumir, mude o tamanho da letra para "0px" e aplique o modelo ao blog.

O resultado? Os cabeçalhos do Mrs. Nightshade e Tutoriais Mrs. Nightshade.

Lembrete: Amanhã, 27 de setembro, a seção de Utilitários começará a ser usada!

Espero que tenham gostado e que tenha sido útil.
Beijos,

Mrs. Nightshade.

Nenhum comentário:

Postar um comentário