Muitos blogs ditam as mesmas formas, e acho que já estão cansados de encontrar a mesma coisa e que na maioria das vezes dá errado.
Mas primeiramente vamos mapear a header.
Vocês podem usar o frontpage e afins ... ou nesse site Image Maps
Usaremos 2 imagens
Uma que vai ser sua header e a outra que vai ser somente o recorte do mapeamento
Veja abaixo as imagens:
Uma que vai ser sua header e a outra que vai ser somente o recorte do mapeamento
Veja abaixo as imagens:
1ª Etapa
Essa será sua imagem de header, que vai ser colocado no seu html como de costume
Essa será a imagem que você irá upar no Image Maps
Upe o arquivo e depois clique em Start Mapping your image e logo em seguida em Continue to next step
Agora abrirá uma outra página, selecione a opção Rectangle, e vai mapeando os tópicos.
Logo após essa etapa clique em Get your code.
Abriu uma outra página, clique em HTML Code e nela que você irá pegar o código de mapeamento, só copie a parte que está selecionada como na imagem. (De <img. a </map>)
2ª Etapa
Vamos aplicar no html.
Localize a tag no modelo
Bom, essa foi uma forma mas exata que achei para explicar vocês, qualquer dúvida entre em contato comigo. Espero ter ajudado.
Enjoy !
Até a próxima :)
<div id='header-wrapper'>Logo após a localização, vamos colar esse código abaixo:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>Se lembra do código selecionado da primeira etapa? Então, cole ele no código que forneci.
<b:widget id='Header1' locked='true' title='Blog de testes (Cabeçalho)' type='Header'/>
</b:section>
<div id='menu'> código do mapeamento aqui
</div> </div>
Bom, essa foi uma forma mas exata que achei para explicar vocês, qualquer dúvida entre em contato comigo. Espero ter ajudado.
Enjoy !
Até a próxima :)
0 comentários:
Postar um comentário