Image Map

Mapeando menu no Blogger

Ensinarei a vocês uma forma super diferente dos outros tutoriais de mapeamento de menus.
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.

Então, no meu estilo de tutorial, vocês usarão o código de mapeamento no html do blog mesmo.

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:

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
<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'> 
<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>
Se lembra do código selecionado da primeira etapa? Então, cole ele no código que forneci.

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