sexta-feira, 20 de janeiro de 2012

[REPOSTANDO] Tutorial: Fazendo Botões de Menu com Imagens

POST ORIGINAL FEITO DIA 29/07/10 às 15:30
REPOSTANDO À PEDIDO DE LOHAINE :)


Já me perguntaram como fazer os botões do menu esquerdo e direito algumas vezes e então,decidi fazer esse tutorial. O tutorial é de fácil entendimento e se alguém quiser usá-lo,não se esqueça dos créditos. Vamos por partes.


1 - Editando a imagem


Para fazer um menu com imagens,precisa de imagens,óbviamente.
Então,edite uma imagem do seu gosto.
Use programas de fácil manuseio,eu por exemplo,uso o Photo Filtre Studio X.
O tamanho da imagem varia de acordo com seu gosto,o tamanho dos meus botões são 218 X 68 pixels.
Depois que editar suas imagens,siga para o próximo passo.






2 - Hospedando sua imagem


Para colocar a imagem no blog redirecionando-a para um determinado link,você precisa hospedá-la.
Abaixo,alguns sites bons para isso:


Tiny Pic

Image Shack

Dumpa Nimage



Irei usar o ImageShack para explicar.
Primeiro,entre no site. (dãããr)
E então,clique em "Browse"
Escolha a imagem que você editou e clique em "Carregar Agora"
Espere carregar.
A página irá atualizar e abrirá então outra.
Copie então o segundo código,como mostro na imagem a seguir: (clique para ampliar)


























Copiou? Então vamos para o próximo passo.




3 - Imagem-Link no Blog.


Esse é o último passo. Preste atenção e você terminará isso rápido.
Agora que você ja tem a imagem e o link dela,vamos adicioná-la no blog redirecionando-a a um link que você queira.
Para adicionar,primeiro,vá em Layout/Design e clique em Adicionar um Gadget. Escolha HTML/JavaScript. Quando abrir o Pop-Up,cole em "Conteúdo" o link a seguir.


ATENÇÃO!!!
Antes de você copiar o link a seguir,cole o link da sua imagem em algum lugar para não ter que perder e hospedar de novo.





Depois,é só editar esse link. No lugar de LINK AQUI,coloque o link de onde você quer que vá,quando alguém clicar na imagem. 


ATENÇÃO!!!
Antes de pôr o link certifique-se de que tenha o " HTTP:// " antes, senão,ao clicar na imagem,o blog falará que a página não existe no seu blog.
E quando editar o link,não tire as aspas,senão a imagem nem o link irão aparecer.


E agora,finalmente,no lugar de LINK DA IMAGEM AQUI,coloque o link da imagem,seguindo as regras de não tirar as aspas e colocar sempre o "HTTP://"


Então,basta apenas clicar em SALVAR e ver sua obra de arte.


Espero que eu tenha ajudado a esclarecer as dúvidas.
Agora vocês percebem que é fácil fazer.
Até mais :D

12 Comentários:

naty disse...

Legal agora só falta eu aprender a desenhar num editor que não seja o paint!

Allan Menezes disse...

Naty
Isso é o mais fácil.
É só pesquisar em blogs,fóruns e até em comunidades do orkut.

Lohaine disse...

obrigada!

Allan Menezes disse...

De nada :D

olgawinx disse...

eu tenho outro jeito de fazer isso...eu vou em adicionar gadgets imagem pego o link das postagens com o mesmo marcador coloco lá e pronto!é muito melhor pois quando você coloca mais postagens com tal marcador ele atualiza o link que foi colocado no botão!

Allan Menezes disse...

Olga
Isso funciona para quem quer colocar UMA imagem no gadget,da forma que eu ensinei pode colocar várias imagens no gadget

Samyra disse...

Muito bom o tutorial.Naty uma dica para você,meus wallpapers até a pouco tempo atrás eram simples e feios,porém a 2 dias eu baixei um programa que se chama PhotoScape,ele é gratuito e não é pesado,porém possui a maioria dos recursos do PhotoShop,nele você pode fazer banners com glitters ou efeitos,também pode fazer gifs animados,pode melhorar a qualidade das imagens,enfim,você pode fazer coisas maravilhosas neste programa,além disso na internet há muitos sites que disponibilizam tutoriais detalhados de como desenvolver as funções do programa(se bem que manusear ele é fácil),fica aqui uma dica para você caso queira baixar este maravilhoso programa,o site abaixo ensina tudo sobre o PhotoScape:


http://photoscapeedicoes.blogspot.com/


Também há outros editores como o Photofiltre Studio,mas na minha opinião o PhotoScape é bem superior!

Allan Menezes disse...

Samyra
Obrigado :D
O scape é bom,eu ja usei e adorei,mas eu não me acostumo.
A Naty é novata em edições de imagens e então pode ser bom pra ela,pois é mais fácil.
Apesar do Photo Filtre Studio ser bem complexo e até ser difícil de usar,eu não consigo largar ele KKKK
Foram anos praticando e finalmente,só AGORA estou conseguindo fazer algo decente,apesar de que existem coisas bem melhores que aprenderei :D

brenofiore disse...

OLA GOSTARIA DE INFORMAR QUE O MEU BLOG GOSSIP WINX, O LINK ANTIGO: BRENOFIORE-WINXSHOW.BLOGSPOT.COM NÃO EXISTE MAIS COMO EU HAVIA DITO, DIA 27 EU MUDARIA O ENDEREÇO DELE PARA ESTE AQUI: HTTP://GOSSIP-WINX.BLOGSPOT.COM
POR FAVOR, PODEM TROCAR O LINK DO BLOG OU SE PREFERIREM USEM O DOMÍNIO: HTTP://GOSSIP-WINX.TK

Obrigado.

Allan Menezes disse...

Breno
Ok,mudarei :D

Lohaine disse...

Obrigada de novo!!!!!!!!!

Lohaine disse...

Samyra,

Os dois juntos(photoscape e photophiltre) ficam ótimos,porque com o photofiltre você cria png do que você quiser,e não precisa ficar procurando PNGS no google,daí você só monta tudo no photoscape!!!!

Mais eu tive que excluir meu photophiltre porque deu um trojan daqueles...

Postar um comentário

Críticas SEMPRE serão aceitas, mas sem palavras grosseiras.
Seu comentário é muito importante :D

Pesquisar este blog

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Ana Naykindo (fofa do Allan) | Proibida a copia total ou parcial do mesmo - Questa è La Magia Del Winx Club - Fã-Blog sem Fins lucrativos>