15 de setembro de 2016

Como mapear um cabeçalho ou menu passo a passo.

Big tutorial como mapear cabeçalho ou menu.

 Hoje vou atender um pedido feito pela ask é esse aqui:
pedido ask png



Big tutorial maper cabeçalho pngA imagem que ela fala é o meu cabeçalho que foi mapeado embora pareça complicado ele é muito simples de fazer só é um pouco longo,vamos lá.Primeiro você deverá fazer seu cabeçalho normalmente só que nele você vai colocar as paginas que você quer que apareça no menu,pode ser colocada em qualquer lugar do cabeçalho, eu trouxe como base para vocês o menu em baixo, esse cabeçalho foi feito no tamanho 1112 px então se você for usar a base deverá mudar seu template para esse valor ok,eu trouxe também uma base transparente no mesmo tamanho caso você queira fazer seu cabeçalho,vamos ao tutorial:

Primeiro faça seu cabeçalho se quiser pode usar essa base transparente ,se ela não estiver preta passe o mouse em cima para encontra-la.
Base transparente PNG

Ou essa onde você só precisara colocar os nomes das paginas e do seu blog e alguns brushes se quiser tem bastante espaço.

CABEÇALHO  IMG PNG


Abra seu editor se não tiver um sugiro o Photoscape pois é esse que eu uso você poderá baixa-lo aqui.

Faça o seu cabeçalho ou abra a base que você baixou e clique no T que tem na lateral escreva os nomes das paginas arraste até o rodapé do cabeçalho e clique em foto+objeto feito isso salve.

O meu ficou assim:
CABEÇALHO MAPEADO IMG PNG

Agora será necessário que você hospede sua imagem em um  site de sua preferência, se não souber como sugiro que leia este artigo como hospedar imagens no blogger.

Depois de hospedada sua imagem copie o URL DA IMAGEM e vá até esse site Image Mapper vai aparecer a seguinte tela role a pagina até encontrar essa parte ,cole a URL DA IMAGEM que você copiou e clique em load image.
mapeando imagem PNG

Agora clique em New link e arraste o quadradinho acima da frase que você quer mapear.

Em link copie o link que deseja que se abra quando clicar em cima como o exemplo abaixo o link e nome do blog.
mapeando imagem PNG

Siga o mesmo procedimento em tudo que você quer mapear terminado, role até  o final da pagina e clique em faça código clique em visualizar e se estiver tudo ok copie o código,senão refaça os procedimentos novamente. 
 Depois de copiado o código vá até seu blog em Layouts adicionar Gadgets e procure por HTML/JavaScript cole o código e salve.

Para colocar o cabeçalho mapeado você deverá  remover o cabeçalho do blog veja como nesse post.

Você pode mapear qualquer imagem como por exemplo só o menu veja esse.
Menu mapeado img PNG
Dica se você não souber como esconder o menu do blogger e o url da pagina que quer colocar veja o final desse post.
 Então meus amores por hoje é só espero que gostem e que eu tenha explicado direitinho,mas qualquer duvida podem perguntar nos comentários e se quiserem algum tuto podem pedir que eu faço ok ,beijos e até o próximo post...

Sobre a Autora:
Viviane Aos 31 anos Viviane é casada e mãe de três lindos filhos, blogueira nas horas vagas desde 2012 mais criou esse blog em Nov/2013 quando iniciou seu curso de Web Designer.Apaixonada por códigos Html e tudo que esteja relacionada a blogs e internet.

Nenhum comentário:

Postar um comentário

Oi obrigada por sua visita,espero que tenha encontrado o que precisa.
E obrigada por comentar seu comentário é muito importante para o desenvolvimento do blog.

Design por Viviane Sonia/Dicas no Blog | Tecnologia do Blogger | Todos os direitos reservados ©2013