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.

 

Comece AGORA a Ganhar Dinheiro com E-mail Marketing

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. eu naum estou conseguindo colocar isso no meu blog! e agora? taah dando erro no XML!

  2. João Vitor

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

  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. Bruno de Lima Pereira Costa

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

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

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *