Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

17 maio 2011

Botão 'ir ao topo da página'


Esta eu vi no WebDesignerWall e achei o efeito bacana. Um botão de 'ir ao topo da página' (Animated Scroll to Top) com  JQuery. Para ver como fica, aqui o Demo (role a página para baixo). Vou ensinar a colocar este botão no blogger.

1- Vá em Editar HTML e antes da tag </head>, coloque os scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'/>

<script>
$(document).ready(function(){

    // hide #back-top first
    $(&quot;#back-top&quot;).hide();
  
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() &gt; 100) {
                $(&#39;#back-top&#39;).fadeIn();
            } else {
                $(&#39;#back-top&#39;).fadeOut();
            }
        });

        // scroll body to 0px on click
        $(&#39;#back-top a&#39;).click(function () {
            $(&#39;body,html&#39;).animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>

2- Coloque no CSS* do template o seguinte trecho:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}

#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}

#back-top a:hover {color: #000;}

/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(http://1.bp.blogspot.com/-sC3qXtoirKo/TdEO99T9TWI/AAAAAAAATbY/e8zExwrL3yM/s1600/up-arrow.png) no-repeat center center;

/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}

#back-top a:hover span {   background-color: #777;}

*CSS: pode ser logo após do trecho:
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

3- No HTML, antes de  <footer><div class='footer-outer'>, coloque:
<div id='back-top'>
<a href='#top'><span/>Back to Top</a>
</div>

E pronto. Veja como ficou em um dos novos modelos do Blogger.



Artigos Relacionados

49 comentários:

Maomede disse...

Desculpa a minha ignorancia, mas não entendi a parte que diz: "Coloque no CSS* do template o seguinte trecho"

Como faço isso ?

Obrigado

Ariane disse...

Maomede, como expliquei no post:

*CSS: pode ser logo após do trecho:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

Maomede disse...

Fiz todo o procedimento, mas infelizmente não deu certo... Com certeza, estou fazendo alguma coisa errada.. sorry.

Ariane disse...

Maomede para o seu blog, modifique esta parte do CSS:

#back-top {
bottom: 30px;
margin-left: -150;
position: fixed;
}

onde está margin-left: -150px troque por margin-left: 0px;

Maomede disse...

Huhu !!!! Valeu, agora deu certo !!!

Muito Obrigado Ariane !!! Ficou Show !!!

Você é uma Linda !!!

Valeu.

Anônimo disse...

Ariane como vc colocou esse menu do blog??

obrigado ;D

kiko disse...

Muito legal esta dica.

Cayo Canette disse...

Eu gostei, coloquei no meu blog, ficou super legal,
obrigado Ariane. De uma passadinha lá no blog

Abraços.

Lady Sybylla disse...

Que efeito bacana...

Mas uma dúvida, é possível substituir essa seta por outra?

Mister Natan™ disse...

no meu blogger tive q colocar -800px deu certo hehe

Mister Natan™ disse...

outrA coisa so vc alterar o BACK TO TOP por VOLTAR AO TOPO

ZINMUSIC O REI DO SOM disse...

nao achei no meu html :
footer

k10 disse...

NAO ACHEI NO MEU O FOTER

Loja primeira Idade disse...

Olá, bom dia! Como sou bem iniciante nesse mundo de blog, gostaria de saber se tem algum blog ou no seu mesmo ,artigos para iniciantes????estou querendo trocar o plano de fundo para bege de bolinha branco..
Obrigada

JB disse...

Que legal gostei gostei da dica deu certinho, venho tentado colocar mais paginas ao meu blog que so tem lite de 10 paginas como eu faço isso

Nathan disse...

Muito Bom Fiz umas Alterações para ficar legal no meu blog e ficou massa ! PArabéns !

http://aguiasdfogo.blogspot.com/

Anônimo disse...

Boa Tarde Ariane , sou blogueiro a cerca de uns 2 anos a mais, uma coisa que tenho muita curiosidade, e como agora que estou começando a entender sobre um pouco de CSS, gostaria de saber porque as vezes da conflito nos blog com os script "ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" se tiver repetição as vezes nao funciona certo hack adpetado no blog, ex; menu expandivel, slides e outros, sei que voce tem um bom conhecimento sobre blog, eu como sou novato aindo estou aprendendo e tentando descobrir meus erros na hora de mudar algos no blogger se for possivel Ariane gostaria que publica-se uma materia a respeito, Beijos amiga, grato por tudo, sou um vistante que adoro seu blog e suas dicas e materias, abraços a todos ...

Dr. Hacker disse...

Poderia postar um templante com a aparÊncia do seu blog mais naum igual? pq sei que naum quer alguem com seu modelo por aew mas da uma ajuda

Unknown disse...

Essa eu também tinah visto lá. É realmente simples, eficiente e super legal.

pinkskulldesign.blogspot.com

Unknown disse...

Ariane vc podia postar esse template aki no blog em muito bonito ele

Ricardo Nunes disse...

ariane quando coloco o codigo acima do acima de head o meu slide deixa de funcionar
http//e-construcao.blogspot.com

Anônimo disse...

Gente pelo amor de Deus eu sempre colocava novos templantes no meu Blog mais agora eu entrei no meu painel e vi tudo diferente e não acho o editar o HTML onde foi parar isso ???

Katya

Ofertas do Dia disse...

Não consegui achar em minha template.

Vou tentar colocar diretamente, baseado em outra template que eu tenho.

Preciso desse script em meu site.

Obrigado pelo artigo.

Abraços!

FRR-Carvalho disse...

Oi Ariane tudo bem minha querida?
Ari gosto muito do seu trabalho, vc estar de parabéns!!!
Continue pois vc ta no caminho certo.
Bjo linda!!!!

Unknown disse...

meu camarada muito obrigado fico muito bem colocado alem de ser muito utill

obrigado

Anônimo disse...

Valeu.

Anônimo disse...

Muuuito obrigada, já tinha olhado em vários outros sites, mas foi o seu que eu entendi e consegui por no meu blog, :)

Silvestrin soluções em RH disse...

Mais uma grande dica desse magnífico blog!

Obrigado por sempre nos mandar essa notícias tutoriais

Silvestrin soluções em RH
silvestrinrh@gmail.com
http://www.silvestrin.com.br

Robison Locutor disse...

Oi Ariane! eu fiz todo o procedimento, porém no final, apareceu a seta BACK TO TOP mas não obedece o comando, eu clico nela e não acontece nada. Pode me ajudar?!
Agradeço!
Ah e parabéns pelo brilhante trabalho...
http://robisonreolon.blogspot.com/

Fernanda Souza disse...

Tentei por no meu blog, mas não aparece a imagem da seta, só o link 'Back to top '.

Fernanda Souza disse...

Fiz tudo certinho, só aparece o link, tem alguma coisa errada?
e-mail: fernanda05_cris@hotmail.com

blog - feezuda.blogspot.com

Ronaldo disse...

Mto legal!

Juliana Braz disse...

não encontrei a parte do footer

o que eu faço??

Thayane Santos disse...

Ariane , sempre entro no seu blogger , mas ultimamente nada de nenhum blogger tem dado certo no meu . Você poderia me dar uma ajuda ou uma explicação , sobre a causa disso estar acontecendo com o meu HTML ?
Atenciosamente.
Obrigada Querida.
www.assimeofim.blogspot.com

João_FG disse...

qual o codigo do botão de ir para o topo?

Gaúcho disse...

Fiz e ficou ótimo. Quem desejar ver o resultado, é aqui:
http://penso-logo-digito.blogspot.com/

Delicado Doces Finos disse...

Eu fiz e consegui, estou muito orgulhosa de mim...
É a primeira vez que crio um blog, ainda estou um pouco perdida, mas estou me esforçando bastante para consegui organizar tudo, o blog ainda está caidinho, ainda nao postei nada, mas se quizerem dar uma olhada é só acessar: atelierdoceemoção@blogspot.com
Obrigada!
Até a proxima.

Anônimo disse...

vlw mesmo me ajudo bastante :D

Maranata estudos disse...

Muito obrigada - DEUS TE ABENÇOE!
Edigleuma de Nazaré

Anônimo disse...

Ai sou mais burro que todos vocês, podem ter certeza. Não sei como fazer isso :/ Na verdade nunca mexi em blog's :(

Jônatas Amorim disse...

horas que eu procuro no ctrl f e nao encotro footer ou body {, :@ :@ :@ :@ :@ :@ :@ que saco!

Filipa Martins ♥ disse...

boa noite . tenho uma dúvida em relação às páginas do blog . já vi em alguns blogs , dividrem os blogs por páginas e colocarem várias mensagens lá dentro . por exemplo , se estiverem a escrever um história por capítulos , criam a página c o nome da história e tem lá todos os capítulos em hiperligações . disseram-me que era através de templates e para procurar no google . não percebo muito disso e pelo que procurei , não vi nada . se me puder ajudar , agradecia :)

family disse...

your site's really great collection template.thanks so much

Bird disse...

Onde encontro o modelo desse template [que aparece nessa postagem] pra baixar ?

releaser disse...

onde tenho que ir para editar o CSS?

Bruna Morelli disse...

Mas se eu quiser um botão desse de ir ao topo da página personalizado.Oq faço?

Eu sou assim... cheia de f-utilidades! disse...

no meu blogger tive q colocar 0px deu certo e eu ameiiiiiiiiiiiiiiiiiii! vlw

Jean de Moraes disse...

Meu template não tem o footer-outer.

Anônimo disse...

Tambem tive que colocar o (0px) ai deu certo ;)

Postar um comentário

Os comentários são moderados.