As âncoras são os links que redirecionam para outro trecho dentro de uma mesma página. Quando se usa esse tipo de link não há o recarregamento da página, a barra de rolagem do navegador apenas se movimenta movimenta para chegar à parte indicada no link. É por isso muita gente chama também de link de rolagem.
Eu uso muito esse recurso porque os posts do HTMHelen geralmente são longos, já que gosto de fazer listas de referência e tutoriais passo a passo.
- Exemplo de uso de âncoras em um post
- Códigos para fazer uma âncora
- Uso de âncora aplicado a um post
- Uso de âncora aplicado à sidebar do Blogger
- Uso de âncora para voltar ao topo do blog
- O link absoluto de uma âncora
1. Exemplo de uso de âncoras em um post
Se você não conseguiu entender do que estou falando só com a explicação anterior, experimente navegar no post 20 clientes para Twitter incluindo meus 11 favoritos. Você vai notar que ele tem 13 âncoras que levam para os 13 tópicos do post. Sem elas seria muito mais complicado navegar no post e alternar entre os tópicos.
Sem esses links, o visitante que quisesse ler o post seria obrigado a seguir a ordem linear, aumentando muito a possibilidade de desistência antes de conhecer dois clientes ou mais. Com as âncoras ele pode ir navegando de acordo com o interesse dele por cada programa. Ele pode visualizar apenas os clientes para Windows ou os programas que não conhece ainda, por exemplo. Visite o post e faça a experiência.
► Depois de ler (ou não) a introdução do post, clique no primeiro programa que deseja visualizar:
► Veja o print e a minha opinião sobre o programa escolhido:
► Retorne ao menu rapidamente clicando no botão Voltar do navegador:
► Escolha outro programa e continue navegando na ordem de seu interesse, não necessariamente na ordem em que classifiquei os clientes. Como os links já visitados ficam com cor diferente, não vai ser difícil saber quais clientes você já olhou:
Muito mais agradável assim, não é mesmo?
2. Códigos para fazer uma âncora:
Para facilitar o entendimento e evitar confusão nos termos, convido você a imaginar uma âncora de verdade, aquela de navio. Agora vamos às definições:
- Nome e local da âncora: ponto de destino da âncora, para onde a barra de rolagem vai quando o link é clicado.
- Link da âncora: local de lançamento da âncora, onde a pessoa vai clicar para chegar ao destino desejado.
O nome da âncora você define exatamente no local para onde a barra de rolagem deve ir. O código é o seguinte:
Onde está escrito nomedaancora você personaliza com a palavra desejada. Para criar o link da âncora, o código também é muito simples:
O texto que vem logo após o sustenido invertido (#) é exatamente o nome da âncora, respeitando inclusive o uso de maiúsculas e minúsculas.
O código acima serve para qualquer página HTML.
3. Uso da âncora aplicado a um post:
Você deve editar o post no modo HTML (Blogger) ou código-fonte (Windows Live Writer). Se você quer que o local da âncora seja o título de uma seção, por exemplo, recomendo que coloque o nome da âncora dentro da tag desse título. Segue um exemplo:
No código acima, o título da seção começa com a tag de cabeçalho <h2>, então eu coloco o nome da âncora depois de abrir a tag e antes de começar o texto. Você pode colocar o nome da âncora do lado de fora do título, mas a precisão da barra de rolagem poder ser menor e ela mostrar um trecho da seção anterior quando ancorar.
Seguem outros exemplos de uso.
○ Antes de uma imagem:
○ Antes de uma lista:
<a name="nomedaancora"></a>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
○ Antes de um parágrafo:
4. Uso da âncora aplicado à sidebar do Blogger:
Serve principalmente para você que tem muitos gadgets na sidebar do seu blog. Basta adicionar um nome de âncora antes do título do gadget desejado, como no exemplo abaixo:
O exemplo acima foi aplicado ao HTMHelen. Para testar entre em www.htmhelen.com/#arquivo e note que a barra de rolagem já direciona para onde está no arquivo do blog na barra lateral.
5. Uso da âncora para voltar ao topo do blog
Para voltar ao topo você não precisa criar nome de âncora, basta colocar o link apenas para #, sem palavra depois.
Você pode adicionar esse link ao final de cada coluna de seu blog para facilitar a vida de seus leitores. Basta ir em Design » Elementos da página » Adicionar um gadget » HTML/JavaScript.
No campo de conteúdo você pode adicionar o seguinte código e em seguida salvar:
O link deve ficar mais ou menos assim:
6. O link absoluto de uma âncora
Quando você gera uma âncora dentro de uma página, o link completo do trecho com âncora passa a ser:
Por exemplo, o link para a primeira parte deste tutorial é:
Essa URL absoluta pode ser usada para acesso direto pela barra de endereço do navegador ou até mesmo como link em outro site:
Segue um exemplo de link que levará você direto para a parte que fala sobre o Saezuri dentro do post sobre clientes para Twitter:
Você também pode encurtar uma URL com âncora em sites como Bit.ly e Migre.me. Segue um exemplo de link com âncora encurtado que leva o visitante direto para o trecho desejado:
Até mais!
Imagem: The Megaphone
23 comentando:
Para deixar uma mensagem sem relação com o post acima use o livro de visitas. Está comentando pela primeira vez no HTMHelen? Sugiro que leia as regras para comentar.