Como colocar um botão ‘voltar ao topo da página’ no Blogger

Muitos blogs tem sua página principal muito grande, mesmo aqueles que usam o resumo dos posts., o que força o leitor a rolar a página por bastante tempo. Por isso, se você se encaixa nesse perfil e não quer abrir mão disso, pode usar um recurso como o botão ‘voltar ao topo da página‘, pra agilizar esse processo ao usuário.

 

Voltar ao topo significa voltar ao cabeçalho do blog, a parte de cima. Como hoje em dia a coisa é muito ágil na internet, esse botão faz esse processo em apenas um clique, evitando que o leitor role a página até lá, o que pode causar irritação e perda de visitantes.

Pra instalar o código é muito simples. Siga essas etapas, depois de baixar o modelo completo do seu template, no caso de der algo errado:

  1. No painel do Blogger, clique em Design e depois em Editar HTML. Não é necessário expandir os modelos de widgets.
  2. Dê um Ctrl+F no seu navegador e digite </body> no campo indicado.
  3. Copie o código abaixo e cole exatamente acima da tag </body>:

<span style=’font-size:130%;’><a href=’#’ style=’display:croll_top;position:fixed;bottom:5px;right:5px;’><img alt=’Voltar ao Topo da Página’   src=’link da sua imagem’  height=’23’ width=’23’ title=’Voltar ao Topo da Página’ /></a></span>

Note que é o atributo ‘#’ o responsável pela página voltar ao topo.

No campo em vermelho, coloque o link da sua imagem. Hospede-a no Picasa ou qualquer outro serviço. Pode ser um ícone com uma seta ou uma “mãozinha” com o dedo apontando pra cima. Clique aqui pra procurar um ícone ideal.

Nos campos em verde são os valores de largura e altura da imagem. Coloquei 23 pixels como exemplo, mas o ideal é que não passe de 32, pra imagem não ficar muito grande.

A parte em azul é a que vai aparecer escrito quando colocado o cursor do mouse em cima da imagem. Use a imaginação e escreva o que quiser.

 

Quer criar uma área de membros e proteger seus vídeos usando o Wordpress?

Junior Silva

Um blogueiro apaixonado por música, internet e tecnologia. Graduando em Tecnologia em Sistemas para Internet, é criador e editor do blog Caixa do Junior. Presente também no Twitter no perfil: @juniorsilva.

Website: http://querocriarumblog.com.br/author/junior-silva/

14 Comentários

  1. Adorei a postagem, também tenho uma dessa em meu Blog que também é de ajuda.

  2. Bruno de Lima Pereira Costa

    Era EXATAMENTE ISTO que eu precisava! Muitíssimo obrigado!

  3. viado

    seu tutorial é muito bom, so teve um probleminha, quando fui colocar apareceu a mensagem que os xmls nn estavam fechados adequadamentes, a minha sore foi q eu entendo de html e vi que em vez do simbolo ‘ estava outro simbolo o ´ (esse ascento estava no lugar do simbolo ‘ mas valeu pelo post, no final qnd eu arrumei deu superserto)

    • Bruno de Lima Pereira Costa

      Verdade… mas isso eu resolvo no Notepad (Bloco de Notas) substituo os símbolos por ‘. Fácil!

  4. João Vitor

    E se eu não quiser colocar o texto em azul? Vai inteferir em algo?

  5. eu naum estou conseguindo colocar isso no meu blog! e agora? taah dando erro no XML!

  6. Não deu!!!
    no meu apareceu:
    Erro ao analisar XML, linha 1259, coluna 13: Open quote is expected for attribute “{1}” associated with an element type “style”.

        • eu só fiz o que tá escrito, copiei e colei…
          no lugar do link da imagem eu colei o link da imagem e pronto…

          • Vitor, fiz pequenas modificações no código, tente agora.

          • Lucas

            No Meu Deu a Merma Coisa nn Consigo Fazer Nada da esse Erro ai ainda

          • Lucas, tente de novo, fiz modificações no código e tá funcionando perfeitamente.

Deixe uma resposta