ancora para o topo fundo - TUTORIAL CHEFE

Templates exclusivos e profissionais, instalação de hacks e domínios e utilização técnicas de SEO. Conheça o ProBlogs, onde fazemos tudo isso a preços relativamente baixos!

Boa noite caro leitor do Rascunhos Blogger! Há algum tempo, publiquei um tutorial (destacado abaixo) onde ensinava como adicionar duas âncoras no blog que faziam com que fosse possível ir às partes superior e inferior do blog com um suave efeito deslizante usando prototype e Scriptaculous. Pode ver o efeito em funcionamento clicando numa das setinhas que aparece nos cantos superior/inferior direitos.

Âncora para o Topo/Fundo do Blog

E neste artigo veremos com aplicar o mesmo efeito, só que para os templates do Designer de Modelos.

Para adicionar este efeito veja o tutorial abaixo:

1. Entre no Blogger. Dirija-se à aba Design e, de seguida, à sub-aba Editar HTML. Clique em Expandir Modelos de Widget.

2. Procure pela tag abaixo:

</head>

3. Acima dela cole o código abaixo:

<script src='http://www.google.com/jsapi'/><script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Se já tiver adicionado este código no seu template, não deve voltar a adicioná-lo. Se estiver a utilizar jQuery no template do seu blog, não pode adicionar este “widget”, portanto vai ter que esperar que eu ensine a adicionar este widget com jQuery. Se utilizada o gadget de seguidores leia este post depois de aplicar o tutorial.

4. Agora, procure pelo código abaixo:

</body>

5. Acima dele cole o código abaixo:

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Ir ao Fundo' border='0' src='http://img338.imageshack.us/img338/5733/abajov.png' style='position:fixed; bottom:40px; right:0;margin-bottom: 5px;'/></a>

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir ao Topo' border='0' src='http://img40.imageshack.us/img40/9397/arribar.png' style='position:fixed; bottom:0; right:0;margin-top: 5px;'/></a>

Se quiser usar as suas próprias setinhas, utilize o código abaixo e, altere a parte a vermelho com a seta “Ir ao Topo” e a parte a azul com a seta “Ir ao Fundo”. Recomendo os sites Icon Finder e IconLook para pesquisar as suas setas personalizadas. Como são os dois em inglês adicione na caixa de pesquisa a palavra arrow.

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Ir ao Fundo' border='0' src='URL_SETA_FUNDO' style='position:fixed; bottom:40px; right:0;margin-bottom: 5px;'/></a>

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir ao Topo' border='0' src='URL_SETA_TOPO' style='position:fixed; bottom:0; right:0;margin-top: 5px;'/></a>

6. Procure pelo código abaixo:

<div class='body-fauxcolumns'>

7. Substitua-o por este abaixo:

<div id='outer-wrapper' class='body-fauxcolumns'>

8. Procure agora pelo código abaixo:

<div class='content-cap-bottom cap-bottom'>

9. Substitua-o pela linha abaixo:

<div id='footer-wrapper' class='content-cap-bottom cap-bottom'>

10. Clique em Guardar/Salvar Modelo e as âcoras foram adicionadas ao seu blog.