COMO CRIAR LINKS ÂNCORA, LINKS DE ROLAGEM

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 para chegar à parte indicada no link. É por isso muita gente chama também de link de rolagem, também pode ser usado links como esses para direcionar para pontos específicos em outras postagens

Entendendo melhor seu funcionamento com os links abaixo: 

1. Introdução

2. Conhecendo sua estrutura

3. Criando um link âncora nos posts

4. Criar os links indicando para o ponto desejado

5. Colocando âncoras em seus Gadgets

6. Criando âncora para pontos específicos de outras postagens

7.Conclusão

1. Introdução

É um recurso bastante útil quando você quer indicar um trecho específico do texto, sem que o leitor precise procurá-lo. Também é útil se você vai escrever um artigo muito extenso e quer facilitar a navegação do leitor. Veja como é simples utilizar o recurso.

2. Conhecendo sua estrutura

Sua estrutura se parece com a estrutura do link que conhecemos:

<a href=”http://www.comosefez.com/texto_final”>

O que vai mudar é o uso do caractere # e onde vai o complemento dele:

Texto texto, <a href=”#texto_final”>texto</a>

Isso indica ao navegador que o link está dentro do documento.

3. Criando um link âncora nos posts

Entenda que este recurso é muito útil para textos grandes, acessibilidade e outras particularidades.

O primeiro passo é marcar o ponto para onde o link apontará. Uma dificuldade é que nem o editor do Blogger e nem o Windows Live Writer permitem criar essa marcação de forma automática, sendo necessário editar o HTML para colocar manualmente o código. Mas, ele é bem simples.

Encontrado os pontos para onde você criará suas ancoras chegou a hora de editar o HTML e colocar o ponto para onde o link apontara.

 <a name="nome-da-ancora">Texto do link da âncora</a>

nome-da-ancora => É exatamente o nome da âncora, você pode personalizar com a palavra que quiser, é a ela que o link se direcionará ao clica-lo, esse nome deve ser diferente em cada ponto para onde haverá um link apontando, o uso de letras maiúsculas e minúsculas deverá ser respeitado, esse código não será exibido em sua página.

Texto de link da âncora => É o trecho que será exibido em sua página. Ele pode ser um subtítulo ou simplesmente uma palavra dentro da postagem.

Você deve fazer isso em todos os pontos para onde os links apontarão.

Outras formas de usar a âncora;

Âncora em imagem:

<a name="nome-da-ancora">link-da-imagem" />

Âncora em parágrafo:

<p><a name="nome-da-ancora"></a>Texto do parágrafo.</p>

4. Criar os links indicando para o ponto desejado
O passo agora é criar o link que apontará para o ponto desejado de sua postagem. Esse passo possui duas formas de ser criado no editor do blogger.

Método 1:

1. Selecionar a palavra link, aquela que será clicada, usarei como exemplo " Texto link da âncora".

2. Após a seleção ir até o botão "adicionar ou remover link", no editor do Blogger.

No lugar do endereço da web colocar o nome da âncora que você criou, não esquecendo de usar o "#" antes do nome, caso contrario não funcionará.

Após ter criados todos os link para suas âncoras você precisará ir ao HTML e corrigir o link. Ele estará criado como abaixo e você precisará remover o trecho http:/

<a href="http:/#nome-da-ancora">"Texto link da âncora"</a>

IMPORTANTE: Você deve deixar essa correção para ser feita somente após terminar sua postagem. Isso é necessário porque, se você voltar para o modo “Escrever” do editor, ele recolocará o http:/ no seu código. Por isso, você deve corrigir todos os links de uma vez e já clicar em “Publicar”, para evitar que o código seja alterado.

Método 2:

O método dois consiste em criar manualmente esse código, simplesmente aplicando o seguinte código ao texto do link da âncora. 

<a href="#nome-da-ancora">Texto do link da âncora</a> 

Novamente saliento que deve ser feito como última coisa, antes de publicar o post.

5. Colocando âncoras em seus Gadgets

Esse método serve principalmente para você que tem muitos gadgets na sidebar do seu blog.

1. Basta adicionar o link abaixo antes do título do gadget desejado:

<a name="ancora-do-gadget"></a>

2. Adicionar um gadget "HTML/JavaScript" com o código:

<a href="#ancora-do-gadget">Nome do Gadget</a>

Ver demonstração do exemplo das imagens acima, Aqui

Esse método pode também ser feito em um menu.

6. Criando âncora para pontos específicos de outras postagens

Os links também podem ser criados para pontos de outras postagens. Quando você gera uma âncora dentro de uma página, o link completo do trecho com âncora passa a ser

http://www.endereco-do-site.com/#nome-da-ancora

Para você usar o link de uma ancora dentro de outra postagem basta trocar onde diz: link-da-ancora, no código abaixo, cuidado para não excluir as aspas "".

<a target="_blank" href="link-da-ancora">Palavra ou frase a ser Exibida</a>

7.Conclusão

Embora seja um recurso simples, ele é um pouco chato de usar devido às limitações dos editores. Mas, com um pouco de cuidado e paciência, é possível utilizá-lo sem grandes dificuldades.

Ele pode ser um diferencial importante para seus leitores!

E você, já conhecia este recurso? Já o utilizou alguma vez em seu blog? Deixe sua opinião em um comentário!

01:38:00