[Blogger - Hacks] - Seta para o topo do blog com efeito deslizante em JQuery

Os blogs que possuem uma quantidade considerável de tráfego, que promovem artigos que geram grandes debates e interações por parte dos leitores e/ou que possuem artigos bem detalhados, consequentemente possuem páginas de artigos extensas. Agora pense em você lendo um desses artigos, e quando chega ao final quer voltar ao topo, o que fazer nesse caso?

Utilizar o scroll do mouse é um tanto quanto "cansativo", por isso fornecer recursos que facilitem a vida de seus leitores é indispensável. Portanto, neste artigo veremos como instalar uma seta no blog que fica sempre disponível para o leitor, e que quando clicada leva o visitante imediatamente para o topo do blog. Você pode conferir o efeito em funcionamento no canto inferior direito do nosso blog de testes.

Geralmente esse tipo de recurso é criado com a biblioteca de scripts Prototype, mas essa biblioteca quando utilizada em conjunto com a biblioteca JQuery causa alguns conflitos no blog, fazendo com que alguns recursos e hacks parem de funcionar. E como a grande maioria dos blogs possuem gadgets e/ou hacks que utilizam JQuery, vamos utilizar essa segunda biblioteca para fazer o efeito, evitando qualquer tipo de conflito.

Preparando o blog para o efeito


Primeiramente precisamos saber se você já possui o JQuery instalado em seu blog para evitar que chamemos o script duas vezes, e precisamos achar um ID dentro do seu blog que servirá como âncora (ponto de referência) para o efeito. Falando assim parece complicado, mas é muito simples!

Verificando se há o JQuery instalado


1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

jquery
Se você encontrar algum texto como o mostrado acima, verifique se ele faz parte de um código maior como o mostrado abaixo.

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

INFORMAÇÃO: o número 1.3.2 é a versão do JQuery, então ele poderá aparecer diferente no seu código dependendo da versão que você possui. Eu nunca fiz esse efeito com versões anteriores, então é importante que você tenha pelo menos a versão 1.3.2, ou superior, para que eu possa afirmar que o efeito irá funcionar.

Se você achou um código semelhante ao mostrado acima, parabéns você tem o JQuery instalado em seu blog, basta continuar seguindo o tutorial; caso você não tenha achado nada parecido com o código acima, não se preocupe, apenas continue seguindo o tutorial também.

Procurando por uma âncora


Agora precisamos achar nosso ponto de referência. Esse ponto de referência, que chamamos de âncora, irá indicar para onde o leitor deverá ser levado quando clicar sobre a seta, por isso é importante que essa âncora esteja bem no topo do blog. Como cada template possui uma estrutura diferente eu não tenho como saber quais são os códigos de cada um, então iremos verificar se há algum ID dentro da tag body do template, para que seja utilizado como âncora. Siga os passos abaixo.

1. Ainda no menu Editar HTML, clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

<body

O código acima é apenas o começo da tag, então você notará que ela é um pouco maior (depende do template usado). Nos templates nativos do Blogger o código inteiro é semelhante ao mostrado abaixo.

<body expr:class='"loading" + data:blog.mobileClass'>

Note que no código acima não há nenhum ID. Se no seu código houver alguma parte como: id="blablabla", parabéns você já tem um âncora, pode partir para o tópico de instalação do efeito deslizante; porém, se o seu código também não tem nenhum ID, continue seguindo o tutorial!

Instalando a biblioteca JQuery no Blogger


Se você achou o JQuery em seu template você pode pular esta etapa, mas caso você não tenha achado, siga-a para poder instalá-lo em seu blog.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

</head>

3. Imediatamente acima deste código, adicione esse outro código.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' /> <!-- bliblioteca JQuery -->

4. Para finalizar, clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo. Pronto, o JQuery está instalado em seu blog!

Adicionando uma âncora ao blog


Se você achou um ID dentro da tag body você pode pular esta etapa, mas caso você não tenha achado, siga-a para poder adicioná-la em seu blog.

1. Ainda no menu Editar HTML, clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

<body

2. Imediatamente após a palavra body, você deverá adicionar o seguinte código.

id='topblog'

Seu código deverá ter ficado como o mostrado abaixo.

<body id='topblog' expr:class='"loading" + data:blog.mobileClass'>

3. Para finalizar, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo. Pronto, você já tem seu ponto de referência (âncora).

Adicionando o efeito deslizante


Como você deve ter percebido em nosso blog de testes, ao clicar sobre a seta o blog vai subindo gradativamente, não é um efeito "pa-pum" clicou está no topo. Esse efeito deslizante, adiciona um ar mais elegante, moderno e suave para o recurso, e veremos agora como adicionar esse efeito.

1. Ainda no menu Editar HTML, clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

</head>

2. Imediatamente acima deste código, adicione esse outro código.

<!-- Efeito deslizante da seta para o topo do blog -->
<script type="text/javascript">
//<![CDATA[
function scrollWin() {$('html,body').animate({scrollTop: $("#topblog").offset().top}, 1000);}
//]]></script>
<!-- Fim do efeito deslizante da seta para o topo do blog -->


Note que a parte que foi destaca em vermelho no código acima precisa ter o mesmo nome da âncora (o ID que fica dentro da tag body), portanto, se você já tinha um ID dentro da tag body, deverá mudar para o nome do seu ID (não apague o #). Já a parte que foi destaca em azul, é responsável pela velocidade com que o blog desliza para cima. Mude esse número para maior pra deixar o efeito mais lento, ou para menor pra deixar o efeito mais rápido.

3. Para finalizar, clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo. Pronto, o efeito está criado.

Adicionando a imagem de seta ao blog


Agora iremos adicionar a imagem de seta no blog. Você pode criar uma imagem que se adapte ao seu template usando qualquer programa de edição de imagens, ou procurar uma imagem que você goste clicando aqui ou aqui. Após achar a imagem, salve-a e hospede-a onde achar melhor (eu aconselho o PicasaWeb).

1. Ainda no menu Editar HTML, clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

</body>
2. Imediatamente acima deste código, adicione esse outro código.

<a href='javascript:scrollWin();' rel='nofollow' title='Ir para o topo!'><img class='seta-topo' alt='Ir para o topo' src='link-da-imagem-de-seta'/></a>

3. Substitua a parte destacada em vermelho pelo link da imagem que você hospedou. Para finalizar, clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Pronto, a seta já estará aparecendo no final do blog, mas os leitores só a verão quando chegarem no final, e queremos que ela fique disponível a qualquer momento, tanto quando o leitor estiver no final do blog quanto na metade dele, assim eles poderão ir para o topo sempre que quiserem. Para isso iremos adicionar alguns estilos CSS a imagem da seta.

Adicionando estilos CSS a imagem de seta


1. Ainda no menu Editar HTML, clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

2. Imediatamente acima deste código, adicione esse outro código.

img.seta-topo {
position: fixed; /* faz com que seta fique fixa em um único lugar, não altere */
bottom: 10px; /* informa o afastamento entre a imagem e a base da janela do navegador, veja a imagem abaixo */
right: 10px; /* informa o afastamento entre a imagem e o canto direito da janela do navegador, veja a imagem abaixo */
}


Os valores destacados em azul, informam o afastamento da imagem com relação à janela do navegador, como ilustra a imagem abaixo. Quanto maior os valores, mais afastada a imagem ficará do canto da janela.


3. Para finalizar, clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Pronto, agora sua seta está instalada e seus leitores poderão ir para o topo do blog quando quiserem! Esse recurso foi testado nos navegadores: Mozilla Firefox, Google Chrome, Opera e Internet Explorer, todos em suas versões mais recentes. Em todos eles o efeito funcionou perfeitamente.

O que achou deste recurso? Deixe sua opinião nos comentários!

É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 5 comentários neste artigo!

  1. ola Igor, obrigada por voltar com o blog! Como fazer para que a seta de subir apareça e "suma"?

    ResponderExcluir
    Respostas
    1. Olá Anônimo, fico feliz que o retorno do blog tenha lhe agradado! Quanto ao efeito que você falou, publicarei algo a respeito em breve! Agradeço o comentário e a visita.

      Excluir
  2. Ótima dica. Gostei, obrigado... VLW :)

    ResponderExcluir
  3. Meu amigo,voce ta de parabens! Há tempos que procuro um tutorial que realmente funcione pra este gadget e o seu tutorial foi o ke me salvou! Funcione mesmo! Valeu

    ResponderExcluir
  4. Parabéns pelo tópico,ajudou bastante,sucesso!!!

    ResponderExcluir