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.
Você pode fazer isso dessa maneira aqui também: http://reinokawaii.blogspot.com/2011/05/tutorial-colocando-uma-imagem-no.html
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: 
.gif)
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
Woaah!! Que cute esse gifs para voltar no topo da página !! Amei *---*
ResponderExcluirObrigada 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 =)
ResponderExcluirBjs Chibiusa,
http://bubble-explosion.blogspot.pt/
:v:Manika, que bom que gostou ^~^Beijinhus:cat:
ResponderExcluir: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:
Amei o tutorial, depois vou tentar faze-lo em meu blog.
ResponderExcluirOs gifs são tão fofinhos *-*
Beijos ♥
sweetasodile.blogspot.com
Ooooi Rô!!
ResponderExcluirObrigada 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...
Oi flor , obrigada pela visita ; depois vou dar uma pesquisada e talvez eu faça uma postagem com capas de tablet ok?!
ResponderExcluirBeijos,
Camila Angelina
http://cantinhodacaps.blogspot.com.br/ (agora com TEMPLATE ANIMADO)
: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!
ResponderExcluir: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:
o meu n funciona!
ResponderExcluirOi, 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?
ResponderExcluirTenho que rever os tutoriais porque fiquei muito tempo fora :/ Assim que fizer isso, te falo com mais certeza ok?
ExcluirAqui continua normal :/...
Excluir