quinta-feira, 7 de junho de 2012

Tutorial: Botão de Voltar ao Topo


Olá pinguins!

Hoje o Maneirão havia me pedido para fazer um tutorial ensinando a colocar e fazer um botão de voltar ao topo, então ai vai o tutorial, vejam:

Primeiro passo: Fazer a imagem do botão.

Abra o photoscape e clique em "Menu" e depois em "Nova Foto", escolha as seguintes medidas: 93 52, e escolha a cor que quiser, eu escolherei a cor azul, vejam como ficara a imagem:


Agora vá em "Objeto" e depois clique na letra "T" que aparecera, veja:


Quando você clicar na letra T aparecera a seguinte aba:


Como pode ver acima, a parte que está circulada de vermelha é onde você escrevera a seguinte palavra : Topo.
Feito isso você terá que clicar em "Ok" e na imagem que você fez aparecera o que você escreveu, e daí é só você clicar na parte escrita e ajustar para onde quer que ela fique.

Veja como ficou:


Quando você terminar, é só clicar em "Salvar" e escolher em que pasta você salvará. 

Segundo passo: Colocar o Botão.

Entre em sua conta e clique em seu blog, depois clique em "Layout", depois clique em "Adicionar um Gadget", escolha a opção ''HTML/JavaScript" e clique. 
Agora copie o seguinte link e cole no espaço em branco do gadget:

<div style="position:fixed; bottom:0px; RIGHT:0px;"><a href="#"><img src="LINK DA IMAGEM" border="0" /></a></div>

Reparem que onde está escrito "LINK DA IMAGEM" é onde você colocara a sua imagem, para isso você precisa hospeda-la em um site, eu hospedarei no imgur.com .
Copie o link que estiver escrito abaixo da seguinte frase "Direct Link (email e IM)", feito isso basta você colocar no lugar dito acima e clicar em salvar e pronto.

Se alguém clicar no botão, voltará ao topo.

É isso pessoal, gostaram do tutorial? Se gostou comente, que provavelmente eu farei mais!

11fiuk

2 comentários: