domingo, 20 de novembro de 2011

Tutorial: Imagem no lugar das guias

Lets-make-this-last-8_large
 Recebi um pedido para ensinar a como colocar imagens no lugar das guias. Vou ensinar do jeito que eu fiz e sempre faço. Então pode ser que não te agrade.
 Vamos lá, pra quem não entendeu o que eu vou ensinar, vou explicar: sabe o menu das guias aqui do TSC, com imagens e tal...? Vou ensinar a fazer isso.
 Clique em Leia Mais e confira o tutorial.

 Primeiro passo: se você faça as imagens. As que eu usei foram estas:

     

obs.: faça a quantidade exata de páginas que você quer colocar. Ex.: meu blog tem umas 10 páginas, vou colocar as principais lá em cima. Se eu tivesse colocado todas, elas iriam ultrapassar o tamanho do blog. Por isso, coloquei os mais importantes (home, contato, galeria, assista, sobre e tutoriais). Se você quiser por todas, tudo bem. Mas tome cuidado pra não ficar "escapando" do limite.

 Segundo passo: hospede as imagens que você for usar; salve os links do Bloco de Notas (ou em outro lugar, tanto faz), porque iremos usá-los mais adiante.

 Terceiro passo: deixe o link das páginas que você for usar lá também no Bloco de Notas.

 Quarto passo: vá em Design >> Elementos da Página. Agora clique em Editar, no gadget das Páginas que fica debaixo do cabeçalho do seu blog, assim:




 Logo depois de ter salvado, o lugar onde devia estar as páginas ficou vazio, não é? Só ficou escrito Adicionar um Gadget. Clique ali, e depois em HTML/JavaScript.

 Quinto passo: copie o código abaixo.

 <center>

<a href="link da página"><img src="URL da imagem" /></a>

<a href="link da página"><img src="URL da imagem" /></a>

<a href="link da página"><img src="URL da imagem" /></a>

<a href="link da página"><img src="URL da imagem" /></a>

<a href="link da página"><img src="URL da imagem" /></a>

<a href="link da página"><img src="URL da imagem" /></a>

</center>

 Em URL da imagem coloque o URL das imagens que você tinha deixado "guardado" no Bloco de Notas.
 Em link da página coloque o link das páginas que você também deixou "guardado" no Bloco de Notas.

 Sexto passo: Cole o código (já editado), no HTML/JavaScript. Se você quiser mais páginas adicione o seguinte código antes de <center>.

<a href="link da página"><img src="URL da imagem" /></a>

 Visualize, se estiver tudo certo, salve.

 Bem, espero ter te ajudado. Comente aqui se deu certo ou não.

7 comentários:

  1. Amei o tutorial, *o* briigada flor' as imagens são exclusivas suas ou posso pegar?? amei de mais aqui *-* vou tentar fazer agora :D boa sorti pra mimm

    ResponderExcluir
  2. eeba brigadinha flor, claro ;) vou pegar seu link bjobjo

    ResponderExcluir
  3. já botei como parceiro (: vaja qui http://mundodemeninasteen.blogspot.com/p/parceiros-s2.html

    ResponderExcluir
  4. Oi,ja estao abertas as votações no concurso Miss blog 2011 *--* ñ perca tempo vote e peças votos !

    http://garotoonerd.blogspot.com

    ResponderExcluir

* Regrinhas:
- Não xingue palavrões que ofenda outras pessoas;
- Não fale mal de outros blogs;
- Críticas são aceitas;
- Comente quantas vezes quiser;
- Não copie meu post, se pegar uma informação daqui dê os créditos;