Como usar imagem no menu do blog
Aê finalmente estou postando esse tutorial tão esperado!
Muita gente duas pessoas me pediram par ensinar como faz um menu igual esse que tá aí em cima, como uma imagem no lugar dos links.
Não é muito difícil, mas requer um pouco de paciência e muita atenção!
1- Primeiro, você deve criar uma imagem da largura do seu blog. Aí você pergunta: Como eu vou saber a largura?
Dá uma olhada no print abaixo:
2- Bom, como a largura do meu blog é de 900 pixels, criei uma imagem dessa largura e com altura de 50 pixels, mas vc pode por a altura que quiser na imagem. Só não vai exagerar, por que se não o menu vai tomar quase a página toda!
3 – Agora escreva nessa imagem o nome de todos os links que vc vai querer no seu menu. Nessa hora abuse da criatividade. Use letras diferentes, coloque um fundo bonito, crie botões ao redor do texto… E depois salve no formato PNG. A minha ficou assim(clique para ampliar):
4 – Agora vem a parte mais complicadinha: Mapear a imagem. Aí vc pergunta: Como assim mapear?
Simples, vc vai especificar as coordenadas da área da imagem que vai ser um link. Eu aprendi isso com um tutorial do site My Nothing, mas fiz meu próprio tutorial que você pode ver aqui.
5 – Você tem que repetir o processo do mapeamento em todas as partes que tem o nome dos links. Recomendo fazer isso no bloco de notas. Feito isso, no painel do blogger clique em Design > Editar HTML.
6 – Aperte Ctrl+F para aparecer a caixa de pesquisa. Digite nela a tag </header> e cole acima dela o código do mapeamento da imagem.
7 – Visualize para ver se está tudo certinho e salve depois salve as alterações. Prontinho!
Gostaram? Entenderam? Espero que sim. Caso não, pode perguntar o que não entendeu!
Muita gente Não é muito difícil, mas requer um pouco de paciência e muita atenção!
1- Primeiro, você deve criar uma imagem da largura do seu blog. Aí você pergunta: Como eu vou saber a largura?
Dá uma olhada no print abaixo:
2- Bom, como a largura do meu blog é de 900 pixels, criei uma imagem dessa largura e com altura de 50 pixels, mas vc pode por a altura que quiser na imagem. Só não vai exagerar, por que se não o menu vai tomar quase a página toda!
3 – Agora escreva nessa imagem o nome de todos os links que vc vai querer no seu menu. Nessa hora abuse da criatividade. Use letras diferentes, coloque um fundo bonito, crie botões ao redor do texto… E depois salve no formato PNG. A minha ficou assim(clique para ampliar):
4 – Agora vem a parte mais complicadinha: Mapear a imagem. Aí vc pergunta: Como assim mapear?
Simples, vc vai especificar as coordenadas da área da imagem que vai ser um link. Eu aprendi isso com um tutorial do site My Nothing, mas fiz meu próprio tutorial que você pode ver aqui.5 – Você tem que repetir o processo do mapeamento em todas as partes que tem o nome dos links. Recomendo fazer isso no bloco de notas. Feito isso, no painel do blogger clique em Design > Editar HTML.
6 – Aperte Ctrl+F para aparecer a caixa de pesquisa. Digite nela a tag </header> e cole acima dela o código do mapeamento da imagem.
7 – Visualize para ver se está tudo certinho e salve depois salve as alterações. Prontinho!
Gostaram? Entenderam? Espero que sim. Caso não, pode perguntar o que não entendeu!
Nenhum comentário
Postar um comentário