Eu sempre tive curiosidade em saber como inserir este efeito em meu blog, porém os hacks por mim encontrados não me satisfaziam, não havia nada de especial, sem graça mesmo.

Em minhas aventuras navegando pela web, em espaços nunca antes navegados (forcei um pouco !), encontrei no Gema blog, este hack jump, com efeito deslizante. Proporciona um efeito bem agradável e é fácil de ser instalado:



 



Veja como se faz:





“Lembre-se: Sempre faça antes, uma cópia do seu template, para evitar possíveis acidentes”










Em primeiro lugar localize a tag </head>




 






E, log acima dela copie e cole o seguinte código:







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


<script>


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


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


</script>





Visualize. Ainda não vai aparecer nada, esta visualização servira apenas para conferir se está tudo ok, se estiver, salve;





Segundo passo:

 





Agora você deverá localizar a tag </body>






Obs- (atenção- não é necessário expandir modelos de widgets)





Cole o seguinte código antes, ou seja, logo acima desta tag:






<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>







<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:40px; right:0;'/></a>



 




Você reparou que foram colocados dois códigos, um para subir, outro para descer. Você poderá usar os dois simultaneamente, ou se preferir apenas um deles, de preferência, o para subir.

 





Caso você queira utilizar tanto para subir quanto para descer, utilize “bottom:40px”, para definir a distância entre os dois botões. (aqui eu defini como 40px; fica a seu critério)




 



Visualize para verificar se esta tudo ok, se estiver, é só salvar.




Se você quiser verificar o resultado basta clicar na imagem contida no lado direito do Blog do Mijadinha








Lembre-se: Faça um comentário, para as gerações futuras !!