Menu 2.0



O QUE É MENU 2.0 ?

É uma personalização que você faz no seu perfil, onde ao invés de escrever um pouco sobre você no espaço reservado para isso, você coloca uma imagem com links que levaum o visitante do seu perfil para outras páginas, dentro (recados, me adicione, fotos, depoimentos) ou fora do orkut (twitter, blog, msn).








Note que se vc clicar em um dos botões da imagem ao lado vai abrir uma nova página, se vc clicar no youtube. vc irá para o meu canal do youtube Pode testar e clicar. Vamos aprender a fazer e a colocar esse menu no quem sou eu do seu perfil.









COMO FUNCIONA?
 
Para fazer o menu usaremos o código em HTML que "transforma" uma imagem em um link, então qdo se clica na imagem abre uma nova janela para um outro local, que é esse: 
<a href="NOVA PÁGINA"><img border="0" src="IMAGEM"></a>



Onde NOVA PÁGINA é onde vc vai colocar o endereço da pagina q abrirá qdo clicarem na imagem. IMAGEM é onde vc vai colocar o endereço em q a imagem está hospedada. Ensinarei mais adiante como hospedar as imagens Trocando oq está em vermelho pelos links fica assim:







<a href="http://www.youtube.com/user/LadyDayCA"><img border="0" src="http://lh5.google.com/-UBs4OXmFcEw/TPQKljJahBI/AAAAAAAAA68/gBtt_K3vgqo/s250/perfilvideos.jpeg"> OU







PASSO 1
EDITAR A IMAGEM



Edite a imagem em algum editor. Colocando um fundo, uma foto, construindo os botões, ou colocando ícones q encontramos pelo google. E salve sua imagem. Caso vc não tenha um editor, e muito menos saiba como fazer para editar vc tb pode fazer um menu 2.0 da seguinte maneira: - Colocando uma foto e logo abaixo ícones ou botões que vc encontra na internet: exemplo: Digite no google ícone twitter, e veja imagens de ícones

Copie as imagens para seu computador para vc utilizar no proximo passo.







PASSO 2
 
RECORTAR A IMAGEM



Temos que recortar a imagem que montamos no editor para separar as partes que vaum ser os botões, e para isso tb usaremos os editores de imagem, mas o PHOTOSCAPE tem essa ferramenta limitada. Usando a imagem do primeiro post como exmplo, há duas maneiras de recortar:















O botão fica bem "justo" mas é mais dificil para linkas as imagens depois.








Funciona do mesmo jeito e fica mais facil por ter menas partes para linkar.
Eu disponibilizei esse video ha algum tempo para ensinar como eu recorto usando o GIMP:
http://www.youtube.com/watch?v=CQd_l0_fzQs







PASSO 3
hospedar as imagens no PICASA



Bem, o orkut até esse momento só está aceitando imagens hospedadas no picasa, se vc naum hospedar no picasa corre o risco da imagem naum aparecer, ou de aparecer no lugar [conteúdo removido] O endereço so picasa éhttps://picasaweb.google.com , e vc faz o login do mesm jeito que no orkut, mesmo login e mesma senha. Click então em FAZER UPLOAD  
Vai abrir uma janelinha para vc criar o seu novo album, dê um nome a ele e clickCONTINUAR  

Click em escolher fotos para fazer upload
 
Vá na pasta em que vc guardou suas imagens recortadas, vc pode selecionar todas de uma vez só, com CTRL+Alt precionados vc clica em cima das fotos que vc quer e somente elas ficaraum "marcadas", então vc clica em abrir, e o picasa vai começar a hospedar as imagens.








Até aqui vc já tem as partes recortadas e hospedadas.







PASSO 4
MONTAR O CÓDIGO COM OS LINKS



Para montar o codigo recomendo que vc abra um editor de texto como o WORD ou o BLOCO DE NOTAS. Depois vc abre a janela de tudo que vc pretende linkar nas imagem, e tb deixa aberto o seu album no picasa em que vc hospedou as fotos. Com uma video aula é mais facil explicar:







http://www.youtube.com/watch?v=Vpet73cZYBA







PASSO 5
COMO COLOCAR O CÓDIGO NO PERFIL



É a parte mais facil: 
1-Copie o código que vc montou 
2-Vá no seu perfil 
3-Click onde vc escreveria sobre vc 
4-Click HTML no canto superior direito 
5-Cole o código 
6-Click HTML novamente 
7-Click SALVAR 
8-Digite as letras da caixinha 
9-Click OK













EVITAR AS LINHAS BRANCAS
 


Como eu não sei se é bug temporário, não vou apagar o código antyigo, só postar um novo... vamos ver se passa o bug :P
<a href="NOVA PÁGINA"><img align=center src="IMAGEM"

Credits -> Orkut Na Mente>

 

By Riptor - Copyright © 2009. Todos os direitos reservados.