20 de jul de 2012

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

Um comentário:

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!