(Última atualização em 10/07/2021)
Se você quer saber como colocar no seu tema aqueles botões de "voltar ao topo" que aparecem quando você rola uma página até o final, é só continuar lendo.
Este é um tutorial rápido de como colocar essa opção em um tema no Tumblr (porém os códigos desse tutorial funcionam em qualquer site) destinado à pessoas que não sabem HTML, CSS ou JavaScript. Portanto estarei mostrando apenas umas opções bem básicas e limitadas de personalização, afinal se eu mostrasse todas as opções de estilização que é possível de se conseguir com CSS3 isso aqui seria um curso e não um tutorial. E infelizmente eu não tenho tempo para escrever um curso inteiro, rs.
Tutorial:
Se você não está acostumado(a) a editar temas:
Se você ainda não conhece a barra de pesquisa do editor de HTML do Tumblr, vá até a página Personalizar do seu blog e clique em "Editar HTML" para abrir o código do seu tema. Clique em qualquer parte do HTML do tema (apenas para selecionar/focar a "janela" do código) e então aperte CTRL+F (ou Command+F). E essa aba irá se abrir no topo do código:
Durante o tutorial eu irei falar sobre alguns códigos que você precisa encontrar no meio do HTML do seu tema. Você pode usar essa aba de pesquisa para encontrá-los com mais facilidade.
HTML:
Vá até a página de Personalizar o seu tema, clique em "Editar HTML", e cole o seguinte código antes de </style>:
<!-- BOTÃO VOLTAR AO TOPO (por https://anyhs-themes.tumblr.com) -->
<div id="at-backtotop-button"> <a href="#" target="_self" title="Voltar ao topo!"> △ </a> </div><!-- #at-backtotop-button -->
<!-- BOTÃO VOLTAR AO TOPO (por https://anyhs-themes.tumblr.com) -->Na parte do código onde está escrito "Voltar ao topo!" é onde você coloca a mensagem que você quer que apareça quando passar o mouse por cima do botão. E onde tem um "△" é onde você coloca o que você quiser que apareça no botão (pode ser uma palavra, um caractere especial ou um ícone vetorial como os do FontAwesome, Linear Icons ou Capuccicons, por exemplo — eu ainda pretendo fazer um tutorial sobre como usar esses ícones assim que possível).
CSS:
Cole o seguinte código antes de </style>:
/********** BOTÃO VOLTAR AO TOPO (por https://anyhs-themes.tumblr.com) **********/
#at-backtotop-button {transition: .5s; z-index: 9999999; position: fixed; bottom: 30px; right: 10px; font-size: 20px; text-align: center; padding: 5px; border-radius: 5px; display: none;}
#at-backtotop-button a {text-decoration: none;}
#at-backtotop-button i {padding: 10px; display: table;}
#at-backtotop-button, #at-backtotop-button i {font-size: 20px;}
#at-backtotop-button {width: 30px; background: #000000; color: #ffffff;}
#at-backtotop-button:hover {background: #222222; color: #aaaaaa;} /* configurações do botão ao passar o mouse */
/********** BOTÃO VOLTAR AO TOPO (por https://anyhs-themes.tumblr.com) **********/
Agora, para personalizar:
Tamanho da fonte: na parte do código CSS onde esté escrito font-size: 20px;, altere o valor "20" para o tamanho que você quiser deixar a fonte do botão;
Largura do botão: onde está escrito width: 30px;, altere o valor "30" para o tamanho que você quer para a largura do botão;
Cor de fundo: onde está escrito background: #000000;, altere o valor "#000000" para o código hexadecimal da cor que você quer que o botão tenha;
Cor da fonte: a mesma coisa serve para o próximo parâmetro, altere o valor "#aaaaaa" de color: #aaaaaa; para o código hexadecimal da cor de sua preferência para a fonte do botão;
Cor de fundo ao passar o mouse: para fazer com que o botão mude de cor ao passar mouse, altere o valor em background: #222222; para a cor que o botão deve mostrar ao passar o mouse;
Cor da fonte ao passar o mouse: para fazer com que a fonte mude de cor ao passar mouse, altere o valor em color: #aaaaaa;.
OBS: Para saber o código hexadecimal de uma cor, confira este tutorial
JavaScript:
Agora você precisa instalar a biblioteca do Jquery no seu tema, caso ele não tenha. Se você estiver usando um tema meu, ele já possui Jquery instalado. Se você não sabe se o seu tema possui Jquery então basta colocá-lo simplesmente colando a seguinte tag logo depois de </body>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- jquery -->
E então cole o seguinte código depois de </body> logo abaixo da tag do Jquery:
<!-- BOTÃO VOLTAR AO TOPO (por anyhs-themes.tumblr.com) -->
<script>
$(document).ready(function(){
$(this).scroll(function(){
if ($(this).scrollTop() >= 100) {
$("#at-backtotop-button").fadeIn("slow");
} else {
$("#at-backtotop-button").fadeOut("slow");
};
});
$("#at-backtotop-button").click(function(){
$("html, body").animate({
scrollTop: '0px'
}, 500);
});
});
</script>
<!-- BOTÃO VOLTAR AO TOPO (por https://anyhs-themes.tumblr.com) -->E pronto!
