05 julho 2012

Menu dentro da Imagem



Oi meninas! Hoje vou ensinar como fazer um menu personalizado, dentro da imagem, tipo o meu aqui do CottonCandy. O bom é que você pode personalizar com a sua cara, do seu jeitinho. Eu aprendi esse tutorial no blog Cherry Bomb. A primeira coisa que você tem que fazer é a imagem do seu cabeçalho com o menu dentro.
Fiz um exemplo para vocês entenderem:


Vamos Aprender ? Então clique em Leia Mais...


Agora você deve deletar o seu cabeçalho original no HTML do seu blog.
Para isto abra o HTML do seu blog, abra a caixa de busca (Ctrl+F) e procure por:
Header1

Você vai achar o seguinte código/ou parecido:
  <b:widget id='Header1' locked='true' title='NOME DO SEU BLOG (Cabeçalho)' type='Header'/> 

Apague tudo isso, e note que o seu cabeçalho sumirá!
Agora vamos para a próxima etapa, Mapear a Imagem.
Abra o site www.image-maps.com
Você vai colocar a URL da sua imagem que você fez ! Caso a imagem ainda nao está hospedada, hospede-a, eu uso este site para hospedar minhas imagens >  www.tinypic.com 
Após hospedá-la, (se você usou o site que eu uso) pegue o link da última caixinha que está escrito> Direct Link for Layouts.
Com o site de mapeamento aberto ponha a URL no local devido, observe a imagem:


 Quando sua imagem carregar, clique no botão RECTANGLE
Na lateral do site, e faça um retângulo em volta da onde você quer que seja um link, olha o exemplo:


 
 
Quando terminar de Mapear todos os links, clique em Get Your Code
Vai abrir uma página e você clica na aba HTML CODE
Vai ser gerado um código e você seleciona até </map> e copia. 
 Entre no seu painel do Blogger, na aba Design> E adiciona um Gadget:
HTML/JAVASCRIPT
Cole o código que você copiou e no final acrescente :
</div>

Para fechar o seu código!

Salve o Gadget, e coloque ele no topo. Salve as modificações, e visualize seu novo menu com imagem !!!


25 comentários:

  1. Muito bom o tutorial! Gosto muito de saber mais sobre personalizar bloguinho!

    Beijocas!
    http://palomaviricio.blogspot.com.br

    ResponderExcluir
  2. vixi.... que difícil :s acho que nunca vou aprender a mexer nesses htmls D:

    adorei o tutorial amiga,eu vou tentar fazer. tenho fé que eu consigo! :)

    beijinhos
    paulabaltazar.blogspot.com.br

    ResponderExcluir
    Respostas
    1. hahaha, amiga claro que você consegue
      te respondi la no seu email, descupa a demora. beeeeijo

      Excluir
  3. Que legal, ótima dica.. adoro saber mais coisas sobre personalização de blogs... eu sooooooofro pra tentar fazer alguma coisa no meu e não tem jeito, apelo pra os modelos prontos ! hahaha

    Seguindo aqui, adorei o blog =*
    http://meucontatoimediato.blogspot.com.br/

    ResponderExcluir
  4. Estou com medo de tentar fazer e destruir meu blog, hahah masss achei legal isso!
    Beijosss,

    death-byfashion.blogspot.com.br

    ResponderExcluir
  5. adorei a dica , flor fiquei muito feliz que vc gostou do meu blog, tbmto seguindo o seu cantinho, mas acho que vc esqueceu de me seguir rsrs confe la ta bomw bjbj linda
    Beijinhos =*

    http://priscilalirow.blogspot.com.br/

    ResponderExcluir
  6. Vou tentar fazer o menu por um cabeçalho ;)
    encantosdeumaadolescente.blogspot.com

    ResponderExcluir
  7. mt bom!

    umanoitemparis.blogspot.com

    ResponderExcluir
  8. Adoro suas dicas!!!
    Passei pra desejar um excelente fim de semana
    Besos
    Lidi
    http://viciosedesejos.blogspot.com

    ResponderExcluir
  9. Su, adorei a dica ;) Vc manda muito bem ;)

    Beijos, ótimo final de semana!

    nandapezzi.blogspot.com

    ResponderExcluir
  10. Eu quero sim fazer uma encomenda... eu queria um Layout bem lindo desse que você faz, é possivel? E quanto custa?
    http://blogueirajussara.blogspot.com.br/

    ResponderExcluir
  11. Ai mais seu layout é tão lindo...... faz um desse p/ mim vai?
    http://blogueirajussara.blogspot.com.br/

    ResponderExcluir
  12. Oii lindona!
    Dando uma passadinha aqui em seu cantinho achei tudo muito lindo, parabéns!
    Já estou seguindo, segue de volta?

    makefashionjungle.blogspot.com

    Bjs!

    ResponderExcluir
  13. Eu já te sigo flor! Mas faz tempo, olha lá nos teus seguidores! Hahahaha
    Beijãooo :)

    ResponderExcluir
  14. Eu quero um parecido com o seu sim. Só que bem patricinha mesmo. E o endereço do blog é o www.blogueirajussara1.blogspot.com esse seu é muito lindo.

    ResponderExcluir
  15. Nossa que legal floor ^^ Adorei o tutorial e a dica..
    Ficou lindo o que vc fez. ..

    http://souzadiinha.blogspot.com.br
    Beijoos <3

    ResponderExcluir
  16. O Fotos e Vídeos já é outro blog, mas é meu.
    blogueirajussara.blogspot.com

    ResponderExcluir
  17. Ótimo esse tuto muito bom!

    Beijos♥

    carismaticaoficial.blogspot.com

    ResponderExcluir
  18. Tem como a gente se falar por um meio mais fácil nao? Tem msn? ou algum outro modo?
    www.blogueirajussara.blogspot.com

    ResponderExcluir
  19. Nome.....................Vc+Mais Fashion
    Estilo do Blog...........Fala de moda,produtos,maquiagens,livros etc.
    Cores que prefere......Preto e branco com glitter ou pode ser branco com dourado glitter
    Brushes preferidos....??/O queé

    ResponderExcluir
  20. ata agora eu vi amiga **
    bjbj http://priscilalirow.blogspot.com.br/

    ResponderExcluir
  21. Adorei as dicas, estava atrás deste tutorial!


    Visite: www.spraydebeleza.blogspot.com.br

    ResponderExcluir
  22. Legal aprendi mais uma coisa!
    Amei!
    Já to seguindo e retribuindo a visitinha!
    :D
    Tá rolando um sorteio bem bacana lá no blog!
    Participa?
    http://migre.me/9ueZE
    Minha flor, to precisando tanto da sua ajuda!
    Tem como você se inscrever no meu canal?
    http://www.youtube.com/user/ViviancomN
    E se não for pedir muito curte a Fan Page do blog?
    http://www.facebook.com/VivianComN
    Tô precisando mesmo da sua ajuda!
    Espero você lá hein?
    Beeeeeeeeeijos Flor!
    http://viviancomn.blogspot.com.br/

    ResponderExcluir
  23. Nossa adorei o tutorial
    teen-girl-fashion.blogspot.com

    ResponderExcluir
  24. Obrigada pela visitinha! seguindo o seu quando poder segue o meu --> bestfriend18.blogspot.com Beijos♥

    ResponderExcluir

Dúvidas, sugestões, Pegou algo, não custa nada comentar ;)
Não esqueça de deixar a URL do seu blog, para que eu possa retribuir a visita !

By Suellen Castro

Cotton Candy, Delicie-se no meu Mundo !

Related Posts Plugin for WordPress, Blogger...