Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Efeitos Javascript Vanessa S.

Incluir Menu flutuante para rolar página do blog

Você já deve ter visto varios blogs por ai que usam um mini menu com umas setinhas no canto inferior direito do blog, que se movem quando você rola a página para cima ou para baixo.
Essas setinhas facilitam a navegação dos visitantes, principalmente quando o blog possui varias postagens na página inicial, o que deixa a página bem extensa.
Com elas o visitante poderá ir direto ao topo da página, descer ou ir para página inicial do blog ao qual ele está visitando.

Vou postar aqui diversas dicas de como instalar Menu Flutuante na Barra de navegação suspensa para rolar a página do blog.
Basta você escolher a que mais lhe agrada e instalar no seu template.

 

1) MINI MENU DE ROLAGEM DA PÁGINA:

É este Menu que eu uso aqui no template. Eu vi este menu no Ferramentas Blog, e adorei,logo corri para trocar o menu que usava antes.
Vou postar como instalar esse menu, mas os créditos são todos de lá.

Eu fiz umas adaptações neste menu, mas se você quiser confira o post original aqui.

Vá no menu “modelo >> Editar HTML”, clique em ‘Expandir modelos de widgets’ e procure pela tag ]]></b:skin>

E cole este código logo abaixo dela:



    <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="ENDEREÇO- DO -SEU -BLOG" title="Voltar para Página Principal"><img src="http://q2q7wq.bay.livefilestore.com/y1praDV29b_fzbCdlfAllRS1rVW0AxvF7jBO_pQ68QOTJ-2t1vZ0ffH5ey4Hcfths0YDK5XNk-s_rdKfPX-_waJSw/indicador-Home.png"/></a>

<a style="display:scroll;position:fixed;bottom:10px;right:50px;" onmouseover="cima()" onmouseout="stopScroll()" href="" title="Rolar para baixo"><img src="http://q2q7wq.bay.livefilestore.com/y1pVjefSFo_4j_n0ZVWNbeBYCqZjCffIhrMBOUgujs2LflIb7Nfi3jgesJjKBxkYxievvwIb8XYkiDxMxifavEfaw/indicador-abaixo.png"/></a>

<a style="display:scroll;position:fixed;bottom:50px;right:50px;" onmouseover="baixo()" onmouseout="stopScroll()" href="" title="Rolar para cima"><img src="http://q2q7wq.bay.livefilestore.com/y1pIOi3KkXbsjG0xCKtSXsxv_PPVWpUZjAXQmu6_qbFi_vkoum6rZTcnSVd0WyWDMIGMj0BmW0jHbkP5RDl55sY8A/indicador-acima.png"/></a>

 

Acrescente o endereço do seu blog no local indicado em vermelho.
Visualize , se estiver tudo certo, salve!
Eu recomendo que você salve as imagens e hospede no seu host, para garantir o bom funcionamento. Você também pode usar a criatividade e mudar as imagens.

 

2) MINI MENU FLUTUANTE:

Se você quiser colocar esta mini barra no seu blog é bem simples.
1º) Vá até ‘modelo’ >> ‘editar HTML’ e procure por esta tag (fica na parte final do seu template):


    </body>
    </html>

 

E cole este código abaixo antes do </body>:


<style type='text/css'>
<!--
#mininavbar
{
display:scroll;
position:fixed;
bottom:1px;
right:1px;
z-index:99;
}
#mininavbar a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mininavbar img
{
border:0;
}
#mininavbar a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
-->
</style>
<div id='mininavbar'><a href='ENDEREÇO-DO-SEU-BLOG'
title='Página principal'><img
src='http://i32.tinypic.com/vip2z9.png'/></a><a
href='#' title='Ir para o topo da página'><img
src='http://i29.tinypic.com/1196niu.png'/></a><a
href='#finalpg' title='Ir para o final da
página'><img
src='http://i32.tinypic.com/143ztac.png'/></a></div>
<a name='finalpg'/>

 

 

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

10 Comentários

  1. .:: Clau ::. disse:

    Juan
    Dá uma olhada no marcador "comentários". Temos algumas dicas publicadas, pode ser que vc encontre essa que vc procura.

  2. Juan(Dono da TFX) disse:

    OI,parabéns pelo post,clau tem como alterar o botão Postar comentário da caixa de comentários do blog,ao aguardo.

  3. Bleffe disse:

    Se eu quiser rolar a página pro lado, como fazer?

  4. .:: Clau ::. disse:

    Ana
    Já temos tutorial publicado que ensina a fazer isso. Leia o artigo:
    https://www.mundoblogger.com.br/2009/10/substituir-titulos-da-sidebar-por.html

    Beatriz
    Dá uma lida neste artigo:
    https://www.mundoblogger.com.br/2009/10/alterar-link-postagens-mais-antigas-e.html
    pode ser que te ajude.

  5. Beatriz Larah disse:

    Seu blog está de parabéns! você sabe como colocar paginas com controle no blog , ( com setinha de anterior e seguinte) se souber coloca para eu colocar no meu blog?

  6. Ana, Jornalista Virtual disse:

    Oi, eu gostaris de aprender a fazer esses nomes diferentes tipo:
    No seguidores vc poe o nome roxo com letras diferentes e com uma imagem antes, como eu faço isso?

  7. sapo60 disse:

    olá amore gostei da dia para numera postagem
    deu certo no meu blog
    bligado!!!
    Beijão

  8. AnneKira™ disse:

    Muito boa sua dica, eu precisava de algo assim no meu blog XD

  9. .:: Clau ::. disse:

    @tudo que voce precisa aqui:
    Eu ainda não ensinei como fazer este efeito pq requer um conhecimento maior em códigos, mas depois vou tentar ver uma forma mais fácil de colocar este tutorial em forma de texto.
    Obrigada pela sugestão e pela visita, volte sempre!

  10. francinelson disse:

    oi queria aprender a colocar esse nomes tipo um menu nas postagens
    ex:
    quando eu cliko em personalizar layort
    aprarece tipos uns menus queria muito aprender a criar isso

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.