15 de mai. de 2012

Voltar ao topo efeito deslizante

         
Oiê meus brigadeiros (huuun), como vão? Eu vou bem . Hoje vou ensinar vocês à colocar o buton voltar ao topo com um efeito diferente, que sobe mais devagar, é o efeito deslizante. Então, mãos à obra:


Vá em Design  Editar HTML  Dê um Ctrl+f e procure </body>  Antes dela cole o código:


<script type="text/javascript">    $(document).ready(function() {       $('#subir').click(function(){          $('html, body').animate({scrollTop:0}, 'slow');      return false;         });     });</script>


Agora procure </head> e cole antes dela o código:


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


Agora adicione o gadget HTML/JavaScript e cole este código:


<div style="position:fixed; bottom:0px; right:0px;"><a href="#" id="subir"><img src="URL DA IMAGEM"/></a></div>


Onde está escrito URL DA IMAGEM você tem que colocar a url de algum button Voltar ao Topo. Aqui algumas:


                      



topo1

topo2









<div style="position:fixed; bottom:0px; right:0px;"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsCBizw5Zt2j32eYLBCpdOvsdes9Wwtzpu27LcjKYfVAonrSm1G99I9v4ROLde5mg2q2Xs1ILPS5SHbxyuzv4PgCDhbjjqwlEXQ-HHBqzx61Ge2zcj9itPn2B_tcnPpj5haBzA3U7AnVQ/s1600/topo7.png" border="0" /></a></div>





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh-gpK4fc-CksL7hL6Xh7aK0t7mH1zKvPw0w3i0IzG-1HGeqgwVCzr7628hDmH-pNieL2bwKOKwD6nmdeUqcBZ3mv0z5TFshpIIAnehNybmyzELBWb2xDjlTGZVaiKvuXr5nZCeXFDe_Ns/s320/KIK.png





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheCqINn62gPD0kV-xhjcb4OjOl0NbkkXU4-o3b5SHRYLXbLnAGtGuVgUU-Wh77OUZMPgWZ2o_CKbkYxGME1tNanCLwL1OQBRq-I5kVGnwuOcX05dZvVAKIbzygjdgeMfdxazhzE08qw9ER/s320/POTO.png





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnk8IduKPnbSUJmzze_NNc74rwlsflx8wkPxdsXJ_wFV7J9ZBuIyHz-cmy-QZD4ll_QEDmFRK50YGdZE8lf4gM6TTzL_zPJTmFpxT3UKNyYNgXiDIgmkukElvHqPRqoOmloc3Hu93K-wJr/s320/TER.png







https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWv3fAmGi6xnHIwQQACA0hOX3x-MhGl0WRt4HIuyUx93OD3hA5rTYg2yTNLN5lp2lyb6i28MLs_S6rLPK4qd8nRInbFrNMLT1jL5sih1xCGwKK-QE-hjqYMdaXsDCWjVtJ5a-Ktp0uTrES/s320/TOPO.png





Bom meus amores, espero que tenham gostado dessa dica. Participem do concurso Fake do Perfis e Depoimentos Prontos e qualquer dúvida é só comentar, viu!! Beijinhos da Gabiiiih.


2 comentários:

  1. Oi! Adorei seu blog, e esse tuto me ajudou muito! Já estou seguindo. Beijinhos!
    Passa lá no meu blog e dá um seguidinha? mariaeduardaoficial.blogspot.com
    Avisinho: Eu consegui colocar o "volte ao topo" apenas seguindo a primeira fase. Bjs! Se corrigir coloque créditos!

    ResponderExcluir
  2. Tinha um tempão que eu tava tentando colocar o meu botão assim, e só o seu blog ajudou, valeu flor ♥ dá uma passadinha lá? beijos.
    http://g1rl-cr4zy.blogspot.com.br/

    ResponderExcluir

Yoo cherry, espero ter gostado do post. Se quiser comentar, fique a vontade, mais antes siga estas regrinhas:

- Não aceito comentário "Seguindo, segue de volta?"
- Não fale palavrões.
- Criticas são bem vindas, desde de que sejam criticas objetivas.
- Deixe o seu blog, talvez eu queira vê-lo.
- Aceito tags e selinhos.

Espero que sigam as regras que são bem importantes.