Tempos atrás, publiquei um script que faz a página rolar até o topo, o scroll to top. Como vocês já estão carecas de saber, eu odeio javascripts, além de deixarem as páginas lentas, eles dão bugs homéricos (o Jquery, por exemplo, até hoje não encontrei uma solução para ele funcionar aqui).Observando alguns blogs, verifiquei que eles usavam uma outra maneira de rolar a página para o topo, sem usar javascript. A coisa era mais simples do que eu imaginava (É claro que para quem é programador, o que eu vou colocar aqui deve ser fichinha, mas como eu não sou designer, e acredito que muitos leitores também não são, nem imaginam como fazer.)
A solução que encontrei é simples, é só usar a tag
Se você não quiser que suba até o #header (cabeçalho), você pode no lugar colocar #content-wrapper ou #outer-wrapper, seja abaixo do cabeçalho ou no início do post.
Eu coloquei esse link no final de cada post com uma condicional para que somente aparecesse nos posts individuais (você pode colocar esse link onde você quiser, sua imaginação é o limite!), e no lugar do link (top), eu coloquei uma imagem com uma seta apontando para cima, além de posicioná-lo para ficar à direita:
O código acima eu coloquei após a linha
O resultado você pode ver no final de cada post em meu blog. Mas...
PORRA CIDÃO, você colocou duas setas, qual delas é referente ao que você explicou?
É a segunda. Passe o mouse sobre ela e você poderá ver abaixo no seu navegador o link apontando para o #header.
A primeira seta é usando um script bem simples, que talvez alguém gostaria de usar (Tem muita gente louca por scripts... Eu não!). Você pode colocar o link da mesma maneira do jeito que expliquei acima:
Com a personalização que apliquei acima, fica:
O par ordenado (0,0) representa em pixels, a localização que você quer dar no link, onde o primeiro zero representa o eixo X, e o segundo, o eixo Y, como num gráfico de uma função de 1º grau... Não sabe o que é isso? Quem mandou ficar de costas para o seu professor e batendo papo com os seus colegas... Dançou, playboy!
Essa dica encontrei no fórum do WSG (Web Standards Group), as personalizações foram feitas por minha conta e risco!
A solução que encontrei é simples, é só usar a tag
<a href> apontando para onde você que que a página suba e pare:
<a href="#header">Top</a>
Se você não quiser que suba até o #header (cabeçalho), você pode no lugar colocar #content-wrapper ou #outer-wrapper, seja abaixo do cabeçalho ou no início do post.
Eu coloquei esse link no final de cada post com uma condicional para que somente aparecesse nos posts individuais (você pode colocar esse link onde você quiser, sua imaginação é o limite!), e no lugar do link (top), eu coloquei uma imagem com uma seta apontando para cima, além de posicioná-lo para ficar à direita:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<p style='text-align:right;'> <a href='#header'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy8Hhoe2DQnOng6Dlz9klZztD4I8Tloy-Uz7brMY6XZJs-A4QjZxRZwQOgtla_X9a_SPiBaRw5jqwj4DF1BsLdCs8IXToTffWeCQfmmi-TtW-fOMnh-qtewVg9Lf8VjO_ZjuMnug/'/></a></p>O código acima eu coloquei após a linha
<div class='post-footer-line post-footer-line-3'> (Para achar essa linha ou semelhante,vá em Lay-out >> Editar HTML >> clique em expandir modelos de widget, e usar control F no seu teclado para achá-la, nunca deve se esquecer de fazer um download do seu template, caso algo dê errado.)O resultado você pode ver no final de cada post em meu blog. Mas...
PORRA CIDÃO, você colocou duas setas, qual delas é referente ao que você explicou?
É a segunda. Passe o mouse sobre ela e você poderá ver abaixo no seu navegador o link apontando para o #header.
A primeira seta é usando um script bem simples, que talvez alguém gostaria de usar (Tem muita gente louca por scripts... Eu não!). Você pode colocar o link da mesma maneira do jeito que expliquei acima:
<a href="javascript:scroll(0,0)">Top</a>Com a personalização que apliquei acima, fica:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<p style='text-align:right;'> <a href='javascript:scroll(0,0)'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy8Hhoe2DQnOng6Dlz9klZztD4I8Tloy-Uz7brMY6XZJs-A4QjZxRZwQOgtla_X9a_SPiBaRw5jqwj4DF1BsLdCs8IXToTffWeCQfmmi-TtW-fOMnh-qtewVg9Lf8VjO_ZjuMnug/'/>
</a></p>O par ordenado (0,0) representa em pixels, a localização que você quer dar no link, onde o primeiro zero representa o eixo X, e o segundo, o eixo Y, como num gráfico de uma função de 1º grau... Não sabe o que é isso? Quem mandou ficar de costas para o seu professor e batendo papo com os seus colegas... Dançou, playboy!
Essa dica encontrei no fórum do WSG (Web Standards Group), as personalizações foram feitas por minha conta e risco!
