Blogger Tips : Tutorial + Icones de "Voltar ao topo"

Hi there!

Como muito de vocês, eu vivo atrás de tutorias para o blog. Sempre procurando códigos, fontes, patterns, tudo pra dar aquele up no visual. Acho que uma das ultimas coisa que eu fiz foi colocar o botãozinho de Go to Top aqui e recentemente achei uma maneira bem mais fácil de fazer e resolvi compartilhar com vocês! Enjoy it .

Vá em Layout
Adicione um novo Gadget no espaço antes da atribuição
Procure com HTML/ Javascript.
Cole o código a seguir modificando a tag img src='(coloque o link da imagem aqui)' e o width e height, e respectivamente a largura e altura que você deseja seu ícone.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a href=""></a><a id='rb-top' style='display: none; position: fixed; bottom: 1px; right:0%; cursor:pointer;font:12px arial;'><img src='http://i59.tinypic.com/25z06qc.jpg' width="64px" height="64px"/></a></div>

Mas porque eu tenho que hospedar minha imagem? E como faço isso?

Quando adicionamos um novo gadget Html ele não aceita uploads de fotos, por isso devemos hospedar nossas imagens em algum site que possa fornecer o link da imagem. Esses sites funcionam como um 'servidor' de fotos, assim as imagens não quebram com o tempo. O processo é simples, você escolhe a imagem do seu computador, clica em enviar que ele vai retornar vários links pra diversos usos, simples assim. Alguns desses sites é necessário fazer cadastro, como o Picasa, ImageShack, porém, acredito eu, que eles devem fornecer algum histórico de seu uploads.

Picasa

ImageShack
TinyPic

Deixarei algumas imagens de Voltar ao topo aqui, fiquem a vontade para usar (:

Vou dando update quando criar mais algumas, ok?

Todos os ícones são de minha autoria, use conscientemente.