Âncora para o Topo/Fundo do Blog (Designer de Modelos)

Â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: