Menu Suspenso para rolar página do Blog

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

menu-rolar-pagina 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:

 

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:

 

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):menu-rolar-pagina

  • 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.

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

13 Comentários

  1. Muito boa está dica,achei interresante,é um atrativo a mais para o blog. Parabêns pelo excelente blog,sempre atualizado ,bem escrito e explicado. abraço,e muito obrigado.

    Responder

  2. Oi, gosto muito das suas dicas. Essa por exemplo fiz e funcionou. Só que a imagen não está como a sua. Ela ficou com uma margem branca e preta. Você pode me ajudar?

    Ana Paula

    Responder

  3. Ana Paula,

    Tem a ver com a configuração de imagens do seu Template e a cor de fundo. por isso o problema.
    Seria bom vc procurar alguma imagem q se adeque ao seu modelo de layout.

    Responder

  4. Oi, resolvi o problema usando a sua imagem. Eu tinha salvo a imagem e colocado no picasa. Bom, resolvido.

    Ana Paula

    Responder

  5. E muito obrigada pelas dicas valiosas que você nos fornece. São excelentes!

    Ana Paula

    Responder

  6. Camarada blz, pena que você não aceitou

    participar do meu blogger…
    Tudo bem já terminei o widgets ele tava com algumas falhas. o meu objetivo era colocar quatro setas direcionais para o usuário trocar de páginas tambem, eu não consegui fazer se vc conseguir será ótimo.

    Agora consegui fazer o widgets ser add em um só clik

    Obrigado por potar os créditos e fiz outros itens flutuantes tambem bem atraente, falando nisto depois me passa seu twitter.

    Responder

  7. Valeu pela excelente dica, estava procurando há tempos valeu.
    Abraços
    Sobre o vídeo do Blog relevante é sempre bom ajudar

    Responder

  8. Sensacional!!! Era o que eu estava precisando (e muito)!!!
    Parabéns pela postagem! Grande ajuda!!!

    Walter Silva

    Responder

  9. tentei uma par de vezes e naum conssegui…

    dai hospedei as imagens no picasa ao inves do ImageShach e conssegui =D…

    naum sei pq o "ImageShach naum funciono"
    mais acabei consseguino…

    VLEW BOA DICA…

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.