terça-feira, janeiro 19, 2010

Botões deslizantes de subir e descer para blogs

Nessa postagem irei ensinar a vocês a inserirem no seu blog botões com efeito deslizante… São botões que possuem funções  de descer até o final da página e subir até o inicio da página… Você não precisa inserir os 2, apenas 1 já vale…

Faça um BackUP do seu blog…  Veja a postagem clicando (AQUI)

Você vai em Layout  >   Editar HTML   …

Não é necessário expandir modelos de widgets…

De um Ctrl+F e procure por  </head>

Acima de </head>, você irá colar esse código …

<script src='http://www.google.com/jsapi'/>

<script>

google.load("prototype","1.6.0.3");

google.load("scriptaculous", "1.8.2");

</script>

Se você quiser você pode salvar para ver se não aconteceu algum erro… Mas você não vai vizualizar nada ainda…

O próximo passo é procurar pela palavra </body>

Acima dela você irá colar esse código…

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Subir' border='0' src='url-imagem-subir' style='position:fixed; bottom:0; right:0;'/></a>

Lembre de modificar a palavra url-imagem-subir pela imagem que você quer que apareça… Então esse código é para o botão que desliza subindo…

O próximo código também  é inserido acima de </body> … mas ele é para o botão descer…

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Bajar' border='0' src='url-imagem-baixar' style='position:fixed; bottom:100px; right:0;'/></a>

 

O mesmo esquema do de cima, coloque a URL da sua imagem… Mas agora vocês terão a opção 100 que está em AZUL … Ela representa a distância entre os botões… quanto maior ela for, mais distante o botão fica, quanto menor mais próximo um botão fica do outro…

Lembrando que não a necessidade de inserir os dois botões … Vocês podem inserir apenas um…

Se tiverem dúvida ainda… Vejam essa vídeo aula…

Gostou??? de um Ctrl+D

Nenhum comentário:

Postar um comentário

Leia as regras
Todos os comentários são lidos e moderados previamente.
São publicados aqueles que respeitam as regras abaixo:

- Seu comentário precisa ter relação com o assunto do post;
- Em hipótese alguma faça propaganda de outros blogs ou sites;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Ofensas pessoais, ameaças e xingamentos não são permitidos;
_ Sempre que enviar um comentario deixe seu E-mail, principalmente no caso de perguntas, Caso contrário não terá como haver resposta...

Nos tutoriais:
- Leia os comentários, sua dúvida pode já estar respondida;
- Caso não esteja, não garanto resposta para as perguntas...

Baixar Subir