terça-feira, 28 de abril de 2009

Como adicionar "Scroll to top" no Blogger

O "Scroll to top" é um link colocado na parte inferior de um site, que quando clicado, rola para o topo da página. Eu achei este código perambulando pela internet no Blogging and Web Development. Este código usa jQuery e tinha sido antes disponibilizado por Craig Wilson, do PH. Creative.
Shin Okada apenas o adaptou para ser colocado no Blogger, e reproduzo o tutorial aqui, com a permissão do autor.

Antes de tudo, faça um back up do seu template (isso é necessário, caso dê algum erro) e vá em Lay-out >> Editar HTML (Não precisa expandir os modelos de widget). Use control + F para achar os códigos em seu template:

1. Antes da tag:
</body>
Adicione o seguinte código HTML
<a href="#" id="toTop">^Scroll to Top</a<
A frase "Scroll to Top" pode ser alterada. No meu blog, vocês podem ver que coloquei "Voltar ao topo", ou pode ser simplesmente "Topo", ou até mesmo uma imagem, o que você preferir.

2. Antes da tag:
]]></b:skin>
Adicione o seguinte código CSS em seu template:
/* 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; }

3. Antes da tag:
</body>
Adicione o seguinte código jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

$(function() {
$("#toTop").scrollToTop();
});
</script>
O resultado pode ser visto na imagem abaixo:


Antes de finalizar, devo acrescentar algo que eu já tinha mencionado no meu twitter. A blogosfera internacional é um pouco mais colaborativa que a nossa. Muitos artigos que posto aqui, eu peço sempre a permissão do autor, coisa que me é concedida prontamente sem nenhum mimimi ou encheção de saco. O pessoal responde aos e-mails e aos comentários na maior da boa vontade e alguns ainda dão algumas dicas interessantes. A nossa blogosfera ainda tem muito a aprender.
Mas não posso deixar de mencionar, por exemplo, a Rô Zanchetta e a Juliana Sardinha, estrelas absolutas da nossa blogosfera que nunca deixaram o sucesso subir à cabeça.

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google