Follow Us @soratemplates

domingo, 17 de junho de 2012

Voltar ao Topo Personalizado

 
Oie ^-^ Sejam sempre bem-vindos!
Hoje vou mostrar para vocês como adicionar um ícone que permite que o leitor volte ao topo da página rapidamente. Esse ícone aparece no decorrer da leitura, então quando estiver bem no fim da postagem, basta um clique e a volta ao topo ocorre bem depressa. Fica tipo o que aparece no painel do Tumblr.
Vamos lá!
A primeira coisa a ser feita é preparar a imagem que vai aparecer no cantinho do blog indicando que se clicar nela, volta ao topo. Sugestões:
 

Lembrando que você pode adicionar o texto que quiser no gif editando no Jasc Animation Shop.
Pronto, já temos nossa imagem. Façamos o seguinte:
1. Acesse a área de edição de HTML do seu modelo e antes de </head> cole isto:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Detalhe: se você já usa essa versão do jQuery, não precisa colocar o primeiro passo; procure no seu modelo por este script; se encontrá-lo, não precisa fazer o passo 1.

2.Agora, acima de ]]></b:skin>, cole isso:
/* Voltar ao topo
----------------------------------------------- */
#Subir {
position: fixed;
bottom: 30px; /* Distancia do final do blog */
right: 30px; /* Distancia da direita ou da esquerda se trocar a palavra right por left */
}

#Subir span {
width: 0px; /* Largura da imagem */
height: 0px; /* Altura da imagem */
display: block;
background: url(URL DA IMAGEM) no-repeat center center;
}
Substitua e altere os locais indicados no código. 

3. Cole isso acima de </body>:
<div id='Subir'>
<a href='#UP'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Voltar ao Topo
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#Subir").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#Subir').fadeIn();
} else {
jQuery('#Subir').fadeOut();
}
});
jQuery('#Subir a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
//]]>
</script>
Agora visualize, arraste a barra de rolagem para ver a imagem aparecendo. Salve. Quando estiver fora da visualização, clique nessa imagem e deslize para o topo x3
É isso.  Espero que gostem e beijinhus<3

Tutorial encontrado em: Ciudad Blogger - link na F.A.Q

11 comentários:

  1. Woaah!! Que cute esse gifs para voltar no topo da página !! Amei *---*

    ResponderExcluir
  2. Obrigada pela visita lá no nosso blog ^^ eu amo o teu já conhecia tu seguias o meu antigo blog o My Magic World e eu seguia este teu o Reino Kawaii mas depois decidi abrir o bubble explosion com a minha melhor amiga dona do blog Little Bad Girl que também já fechou,Vanessa.Ainda bem que gostas-te ^^ e seguiste,também já esta-mos a seguir o teu!se algum dia tiveres elite de afiliados gostaria-mos de nos afiliar se fosse possível =)
    Bjs Chibiusa,
    http://bubble-explosion.blogspot.pt/

    ResponderExcluir
  3. :v:Manika, que bom que gostou ^~^Beijinhus:cat:
    :v:Bubble Explosion, sejam bem-vindas! Bom, a elite afiliados aqui do blog está completa, mas muito obrigada mesmo; vocês já estão entre os blogs que considero como favoritos!!!Beijus e obrigada uma vez mais:cat:

    ResponderExcluir
  4. Amei o tutorial, depois vou tentar faze-lo em meu blog.
    Os gifs são tão fofinhos *-*
    Beijos ♥
    sweetasodile.blogspot.com

    ResponderExcluir
  5. Ooooi Rô!!
    Obrigada pelas suas visitas em meu blog...fico SUPER CONTENTE com isso! Obrigada mesmo!
    Mas estou tão sem tempo pra ele, a faculdade esta me consumindo D+, menina! To sem tempo ate pra respirar! rsrs Mas logo entram as férias e estou cheias de planos pra ele!

    Ah! Vc me surpreende cada vez mais com o Reino Kawaii! Os posts, o design, tudo muito fofo!!!
    Adorei aquela patinha de gato que mia...que cute!

    beijinhos...

    ResponderExcluir
  6. Oi flor , obrigada pela visita ; depois vou dar uma pesquisada e talvez eu faça uma postagem com capas de tablet ok?!

    Beijos,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br/ (agora com TEMPLATE ANIMADO)

    ResponderExcluir
  7. :v:Mábele, eu entendo vc ^^ Agora que terminei a facul tenho um pouquinho mais de tempo, mas antes...só estudando!!! E que bom que vc está gostando das mudanças ^^ A patinha é lindinha; tem ela em versão preta também, super kawaii!
    :v:CAPS: nossa e eu vou te agradecer tanto!!! Preciso mesmo de uma nova e fofinha ^^ Aquelas do seu post para iPhone são perfeitas!
    Beijus e muito obrigada a todas:cat:

    ResponderExcluir
  8. Oi, eu fiz tudo como o postagem disse. A imagem apareceu, mas não tem como clica-la a voltar ao topo. Como eu resolvo isso?

    ResponderExcluir
    Respostas
    1. Tenho que rever os tutoriais porque fiquei muito tempo fora :/ Assim que fizer isso, te falo com mais certeza ok?

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart