Colocando seta de voltar ao topo

Setas de voltar ao topo são bem úteis para pessoas que colocam postagens enormes na página inicial do blog. Basta um clique na seta para voltar ao inicio. Claro que apertar F5 também serve, mas nada mais fofo que uma seta bem feita. Com esse tutorial vamos aprender a colocar essas setas no blog. Caso queira ver algumas que foram postadas no blog clique aqui.

Modo 1:

Vá em Design > Elementos da página > Adicionar um gadget > Gadget HTML/JavaScript

<div style='float:right;'>
<a href='#'>
<img src='URL DA SETA' style='display:scroll; position:fixed; bottom:5px; right:5px;' title='Voltar ao Topo da Página'/>
</a>
</div> 

No local destacado de vermelho coloque a URL da sua seta. Nos de rosa, mude, respectivamente, a posição da seta (right para left - direita para esquerda), a posição (fixed para float - fixa para "flutuando") e a distância da seta, sendo bottom a distancia para baixo e right para a direita.

Modo 2 (estilo Tumblr):

Vá em Design > Elementos da página > Adicionar um gadget > Gadget HTML/JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script><a href="javascript:;" id="scrollToTop"><img src="LINK DA IMAGEM" border="0"/></a>

Agora vá em Modelo > Editar HTML > Procure por /b:skin > Acima, cole:

#scrollToTop:link,#scrollToTop:visited { color: transparent; background-color: transparent; display: none; position: fixed; bottom:5px; right:5px; float:right;}

As alterações são a mesma do modo 1 :)

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar