Menu Suspenso para rolar página do Blog

Quem reparou no canto inferior direito da tela viu que temos um novo menu suspenso aqui no [ Ferramentas Blog ] para otimizar a navegação pela página. Descobri isso num site e aprendi como fazer e agora vou ensinar. É sempre importante oferecer meios de navegação pelas páginas de seu blog e essa é uma opção bem simples de usar e prática também.

Primeiro, dando os devidos créditos, vi esse menu suspenso no site Dica de Dica, que até me convidaram para escrever pra eles, mas já tenho trabalho suficiente aqui. Eu fui conferir o site e vi esses ícones no canto da tela, achei a idéia bem interessante e resolvi mexer no código-fonte deles para ver se aprendia como colocar no meu. Fiquei surpreso com a simplicidade do recurso e que pode ser aplicado em qualquer blog de forma bem objetiva.

ERRATA: O Dica de Dica já publicou o tutorial definitivo desse menu suspenso, leia também para complementar: Tutorial Blogger: Menu de Rolamento Automático e Flutuante de Páginas.

Já ensinamos aqui como criar uma menu de ícones e como colocar elementos flutuantes no seu blog:

• Menu com Ícones para Blog
• Imagem flutuante

Para o código que vem abaixo, de um menu suspenso para rolar a página como usamos aqui, e que é bem simples de instalar em seu blog, será preciso armazenar as três imagens em algum host de sua preferência. Sempre recomendamos o básico e padrão do Blogger, o PicasaWeb. As URLs das imagens serão adicionadas ao código abaixo onde for indicado:

• Armazenar Imagens na Internet – PicasaWeb

Inserindo o menu em seu blog.

1. Copie as imagens para o seu host ou use a URL que uso aqui (não posso garantir que vão funcionar sempre, por isso é bom ter uma cópia delas em seu PC, pelo menos):

• Imagem da seta para cima 
  Imagem da Home
  Imagem da seta para baixo

2. Copie o código que vem abaixo fazendo apenas as modificações indicadas em vermelho:

<script language="JavaScript">
function cima() {
window.scrollBy(0,20); // velocidade para cima
scrolldelay = setTimeout(‘cima()’,100); // tempo da rolagem
}

function baixo() {
window.scrollBy(0,-20); // velocidade para baixo
scrolldelay = setTimeout(‘baixo()’,100); // tempo da rolagem
}

function stopScroll() {
clearTimeout(scrolldelay); // para o rolar ao tirar o cursor do link
}

</script>

<a style="display:scroll;position:fixed;bottom:30px;right:50px;" href="URL_do_seu_Blog" title="Voltar para Página Principal"><img src="URL-da-Imagem-HOME"/></a>

<a style="display:scroll;position:fixed;bottom:10px;right:50px;" onmouseover="cima()" onmouseout="stopScroll()" href="" title="Rolar para baixo"><img src="URL-da-seta-PARA-BAIXO"/></a>

<a style="display:scroll;position:fixed;bottom:50px;right:50px;" onmouseover="baixo()" onmouseout="stopScroll()" href="" title="Rolar para cima"><img src="URL-da-seta-PARA-CIMA"/></a>

3. Vá ao painel do Blogger, no menu “Layout” ~> “Elementos de página”, e crie um gadget do tipo HTML/JavaScript. Será aí que você vai colocar o código. O gadget pode ficar em qualquer lugar pois não ocupa espaço e não aparece onde foi adicionado. Ele serve apenas para fazer executar o código. Salve e veja o resultado em seu blog.

Funciona em qualquer navegador, até no IEca 6. Se você entender como funciona esse código e o que está nos outros dois tutoriais que indicamos acima, acredito que, com um pouco de criatividade, você poderá desenvolver outros menus e até outros serviços flutuantes para seu blog.