Adicionando link de “voltar ao topo” no Tumblr

Olá leitores! Hoje trago de volta os artigos sobreTumblr que já não apareciam por aqui há algum tempo. Para os que ainda não conhecem bem essa plataforma ou gostavam de saber/aprender mais sobre ela, aconselhoeste artigo que faz uma espécie de introdução à plataforma. Pois bem, continuando com o assunto do artigo de hoje, neste post irei dar um tutorial de como colocar uma imagem ou link de texto que, sendo clicada, volta ao topo da página de seu blog. Esse hack é possível ser feito também no WordPress e no Blogger, dê uma olhada:

• Colocar botão que volta ao topo (Blogger)
• Colocar botão que volta ao topo no WordPress

 

Como adicionar botão de “voltar ao topo” da página no Tumblr

Pois bem, passemos agora ao tutorial que o guiará no processo de inserir um link de voltar ao topo da página no Tumbr…

1º – Em primeiro lugar, aceda à área administrativa de seu blog Tumblr.

2º – Agora vá na aba Customize > Edit HTML.

3º – De seguida, localize (com a ajuda do localizador em f3) a seguinte tag:
</body>

4º – Depois, imediatamente ABAIXO/DEPOIS dessa tag, cole o seguinte excerto de texto:

<style type="text/css">
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#w2b-StoTop").scrollToTop();
});
</script>
<a href='#' id='w2b-StoTop' style='display:none;'>Voltar ao topo</a>

5º – Agora é só salvar e está feito!

EDITAR

Para editar o texto do link (“Voltar ao Topo”), basta alterar a parte do código acima transcrito que está negritada a vermelho, trocando esse texto por outro de sua preferência.

No caso de pretender colocar uma imagem em vez do texto, altere a última linha do texto, trocando-a por esta:

<a href='#' id='w2b-StoTop' style='display:none;'><img src="ENDEREÇO DA IMAGEM" alt="Topo"/></a>

Não esqueça alterar o texto negritado pelo endereço da imagem que deseja colocar!