• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

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'/>

 

 

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn