Menu personalizado! Feito o do Lincy.
Eba! Será mais um tutorial, a maior parte dele, eu aprendi no blog ''Cherry Bomb''. Bem, para quem não sabe, menu é essa parte que tem no template do Lincy Mods:
Acho legal, bom para pessoas que gostam de um blog mais ''proficionalizado'' ( não que o lincy seja, okay pessoal. kkk ) Então iremos mapear a imagem! Vou ensinar tudo, cada passo a passo a vocês. Vamos aprender, clique em ''Continuar Lendo'', para seguir o tutorial.
1- Então primeiro, visite este site. E deixe ele em uma aba: http://www.image-maps.com/ - acho ele um dos melhores site para mapeamento!
Faça um template, e coloque as páginas que você tem, tá certo, feito no Lincy, quando fiz o template, eu fiz um quadrado e coloquei o nome de todas as páginas. Isso você não tem dúvida, né? ( Sugiro que você na hora de fazer o quadrado, faça sem estampa, fica melhor, mas você é quem sabe ).
2- Logo que você entrar no site ( ná página inicial ), irá encontrar assim:
3- Clique em ''Selecionar arquivo'' e coloque o template do seu blog. Logo em seguida, clique m ''Start Mapping Your Image''.
4- Então você vai ver que espera 10 segundos. Logo depois que esperar, vai aparecer assim:
Clique em ''Continue to next step'' e siga em frente.
5- Quando tiver clicado, vai ter aparecido se template do lado esquerdo e uma aba ao lado direito, okay! Na aba do lado direito, pode ver que tem isso:
Você irá clicar em ''Rectangle''.
6- Quando tiver clicado, isso irá aparecer, não é verdade?
7- Você irá apagar o link que em em ''Link for this map'', e irá colocar o link da página que você fez, Por exemplo:
8- Quando e você clica em ''save'', não prescisa colocar nada em ''Title/Alt for this map''. Depois clica em ''Rectangle'' de novo!
9- Você vai na próxima página de acordo com a ordem que voc~e colcou no seu template, e coloca o link da página. Por exemplo:
Entenderam essa parte?
10- Agora, quando você já tiver mapeado todas as imagens ( colocado o link em todas as páginas ). Você vai clicar em ''Get your Code''.
Que fica na aba do lado direito.
11- Depois você vai ver que a página tem esses menus ( ficam no topo da página ).
Você vai clicar em ''HTML Code''.
12- Irá aparecer o código do template. Você vai fazer ''Ctrl C, até Assim ( Detale, eu irei cortar um pouco da imagem, mas obviamente você vai saber até onde vai pegar o código ).
Entendeu?
13- Quando tiver pego o código todo vá no ''Painel do Blogger'' e clique em ''Layout''.
Isso vocês já sabem, não é? ( Se não, comente ).
14- Em seguida, você vai clicar em ''Adicionar um gadget'' de ''HTML Java Script''.
15- E coloque o código do seu layout ''Ctrl V''.
Arraste debaixo do cabeçalho, e exclua seu cabeçalho, para colocar o novo!
16- Salve, e você vai ver, que vai ficar baixo o cabeçalho! Calma, tem um tutorial ensinando a subir mais o seu cabeçalho nesse blog, clica AQUI! Para ir até o tutorial. E AQUI, para ter um blog bem parecido com o Lincy Mods!
Este mapeamento de imagens, serve não só para templates, como para qualquer tipo de coisa também! Por exemplo, eu utilizei o mapeamento para:
Desenehi no inkscape, depois fui no site de mapear, mapêei pegando os links dessas redes sociais, peguei o código e adicionei! ( Ah, e a porpósito, me sigam no twitter ).
Espero que esse tutorial tenha ajudado vocês, espero que tenham entendido! Se você não entendeu algum desse passo-a-passo, comente e faça sua pargunta! Deixe o link do seu blog para eu explicar melhor!
Assinar:
Postar comentários (Atom)
6 comentários:
Eu acho lindo, mas toda a vez que eu mapeeio depois de um tempo dá erro na imagem no meu cabeçalho ): beijos,
blogDesenrola.tk
Ele é bom se você quer colocar dois links em uma imagem!Mas eu não uso para cabeçalho!
http://ladyalen.blogspot.com
Adorei o blog, os posts sao bem elaborados tb e tal <3 kkk, adorei *0*
Bom dia p vc flor!! <33
beijos,
bnascimentooo.net.tc
Meio complicado,mas vou ler bem.
Acho ótimo porque dá pra fazer com outras coisas e serve pra o que eu tava querendo. ^^ Brigada!
BJUKU!!
ficou fofo demais!
www.Bikoti.blogspot.com
esse menu é fofo *-* o lincy é todo fofo rs beijão
spaziodm.com
Postar um comentário