Scroll to Top Blogger O Script de jQuery é de fácil instalação e proporciona o rolamento vertical para a parte superior da página.
Se você estiver no início da página o botão é invisível, mas este fará fade-in, assim que o usuário inicia a rolagem da página.
Ao clicar no link este retorna o rolamento ao topo, e em fade-out desaparece gradualmente.

Faça o download do scroll-to-top Zip no site do projecto e guarde no seu computador, depois hospede os scripts no seu site de hospedagem preferido.

Essencial – Antes de fazer qualquer alteração é melhor fazer um backup do seu modelo actual. Baixe e salve o seu tema, assim você pode voltar atrás se algo errado ocorrer. – Guarde o backup do seu template pois pode sempre em qualquer altura reverter para o seu anterior modelo. - Para faze-lo entre na guia "Layout" em "Editar HTML" e salve uma cópia do seu template original clicando em "Baixar Modelo Completo".


Vamos então começar.

1º - Deixe a opção "Expandir Modelo de Widgets" desmarcada.

2º - Para incluir os scripts na sua página, procure pela tag </head> e coloque antes desta o seguinte código:
<script src="http://endereço-do-seu-arquivo/jquery-1.3.2.min.js" type="text/javascript"></script>

 

<script src="http://endereço-do-seu-arquivo/jquery.scroll.pack.js" type="text/javascript"></script>

 

<script type='text/javascript'>
$(function() {
$("#toTop").scrollToTop();
});
</script>

 

    </head>


3º - Adicione o seguinte código CSS no seu código CSS do Blogger, para a posição e estilo.
/* to top */

 

#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }


4º - Localize o final do seu código – as tags – </body> </html> e antes do fecho da tag </body> coloque o seguinte código:
<a href="#" id="toTop">^ Scroll to Top</a>

 

    </body>
</html>


Visualize, salve e estará instalado.

Você pode ver a acção nesta página. Bons ScrollS ...

Share To:

Post A Comment:

1 comments so far,add yours

width='100%'/>