Image Map
Blog: Anime Shoujo / Sigla: AS
Desde: 30/03/2012
Tema: Puella Magi Madoka Magica
Dona: Thays Ramos
Post: 1906
Comentários: 8500
Visualizações: 3.234.147

13.3.13

Tutorial: Como Mapear Uma Imagem

Tumblr_m8hspxze5e1r4qtr7o1_500_large
Yoo, minna san!
Trouxe para vocês um tutorial de como colocar as páginas junto com a imagem do cabeçalho, ou seja, como 'mapear' uma imagem. Bem, vamos aos passos (^.^)/
(créditos totais do tutorial: Cherry Bomb ~apenas as imagens foram editadas por mim~). Continue lendo>
1. Primeiro você precisa deletar seu cabeçalho (não esqueça de primeiro salvar uma cópia, caso se arrependa). Para isso, faça o seguinte: 
Vá no html do blogger e aperte Ctrl+F e procure por Header1
Você achará algo parecido com isto:
<b:widget id='Header1' locked='true' title='NOME DO SEU BLOG (Cabeçalho)' type='Header'/>
Apague essa parte e salve. Perceba que seu cabeçalho vai sumir.
2. Depois, você deve salvar a sua imagem na internet. Para isso, crie uma conta no Imageshak ou outro site de sua preferência e hospede a imagem. Copie o link (no Imageshak é o 'link direto').
3. Para o mapeamento da imagem, é necessário ir ao seguinte site: http://www.image-maps.com/ Depois, cole o código (url ou link, como preferir) da imagem em 'From a Url', como mostra o print:

Depois da imagem carregar, vai aparecer uma outra tela, parecida com esta:

A seguir, clique em no botão 'Rectangle' na lateral direita e faça um retângulo em volta da área aonde você quer colocar o link, assim como mostra a imagem abaixo.
Na parte onde estiver escrito 'Link for this map' é onde você deve colocar o url da página que corresponde. E lembre-se de NÃO preencher a segunda lacuna 'Title/Alt for this map'.
Depois, clique em 'Save'. 
Vá fazendo isso até terminar de colocar os links. Quando finalizar, clique em 'Get Your Code' e depois clique na guia 'HTML code'.
Selecione o código até </map> e copie.
*Clique na imagem para aumentar*

4. Vá para Blogger > Designer e adicione um gadget de 'Html/Javascript', cole o código e adicione ao final a tag </div> para fechar o código.


image
*Esta imagem pertence ao Cherry Bomb*

5. Salve o gadget e arraste ele para o topo do blog.
6. Clique em salvar no topo do blog.
7. Está pronto!
Lembrem-se que: este tutorial pertence ao Cherry Bomb.
É isso (~.~)
Kissus, Na (*3*)

4 comentários:

  1. Eu sempre sigo esse tutorial pra fazer meus menus ;-)
    Seguindo, segue de volta?
    the-paradiise.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. É, ele é ótimo para isso ^.^ fiquei tão feliz quando o encontrei!
      Kissus :*

      Excluir
  2. Ótimo tutorial. Mto obrigada! =)

    ResponderExcluir
    Respostas
    1. Domo arigatô, Mirai-chan! (^.^)
      De nada, quando precisar... :)
      Na.

      Excluir

Deixe os seus comentários mais parecido com o seu jeito,use os emoticons do AS e se divirta comentando...

Bjinhos :**

001   002   003   004   005   006   007   008   009   010   011   012   013   014   015   016   017   018   019   020