Pesquisa personalizada

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.



Permalink:





Sobre o Autor:
Crazyseawolf Para saber mais sobre o autor deste blog, visite o seu perfil no Google+ ou este link . Para enviar uma mensagem, clique aqui . Para outras informações, leia o FAQ .



6 comentários :

  1. Creio que o seguinte código produziria o mesmo efeito, só que sem scripts:

    <a href='#' style='display:scroll;position:fixed;bottom:10px;right:10px;' title='Volte para o Topo'><span style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; background: rgb(244, 255, 191) none repeat scroll 0% 0%; border: 1px solid rgb(204, 204, 204); bottom: 10px; color: #666666; cursor: pointer; padding: 5px; position: fixed; right: 10px; text-align: center; text-decoration: none; width: 100px;">^ Topo da Página</span></a>

    Não tenho absoluta certeza, pois uso uma imagem no meu, o que facilita muito, só tirar todo código entre desde <span.. até ../span> e colocar a imagem como sempre (<img src...).

    :}
    #fikdik

    Ah, e concordo plenamente, odeio ter q admitir, mas o Brasil ainda é terceiro mundo quando se trata da blogosfera. Infelizmente.


    abs,
    Fabricio

    ResponderExcluir
  2. Nunca conheci ninguém na blogosfera que goste de mexer tanto nestas coisas quanto você! Tenho aprendido algumas coisas bem legais aqui! :)

    Beijos, Cidão!

    ResponderExcluir
  3. Oi de novo,

    Também acho que a blogosfera internacional seja mais solidária; mas a Brasileira não é não má (porque see eu começar a falar da Portuguesa..meu Deus)...

    Obrigada pela dica, Gato :D!

    Beijos

    ResponderExcluir
  4. Fabrício (brohg): Bela dica. Vou tentar também. Abraços!!

    Du: É a curiosidade! Gosto de saber como as coisas funcionam!!! :o)

    Max: Até em Portugal? Será que deve ser um problema dos países de lingua portuguesa?
    A lot of kisses for ya!

    ResponderExcluir
  5. Muito boa sua explanação. Parabéns.

    ResponderExcluir
  6. Cada post melhor que o outro.
    Sensacional a interatividade dos artigos, de modo que não nos deixa dúvidas.
    Já adicionei este relevante Blog, em meus favoritos.

    ResponderExcluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Related Posts with Thumbnails
Google
 
 
Template Denim, criado por Darren Delaye, customizado por Crazyseawolf.