![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
Algumas vezes podemos publicar artigos longos e conteúdo integrado em nossos blogs, fazendo referência interna ao mesmo post. E para facilitar a leitura do visitante, é possível criar links que apontam para dentro do mesmo artigo, como âncoras de texto, que oferecem a possibilidade de navegar na mesma página. Para ficar mais claro, aqui vai um exemplo e o tutorial ensinando a usar.
Comecemos esse tutorial com um exemplo. Todo final de artigo do [ Ferramentas Blog ] colocamos links de posts relacionado. Quer ver o que tem relacionado a este artigos aqui? Então nesta âncora Posts Relacionados!
Da mesma forma que criamos links internos e externos para páginas de nosso blog ou de outros sites/blogs, links que apontam para outros conteúdos, também é possível criar links que apontam para dentro do mesmo artigo/post.
Só que há uma diferença bem simples. É preciso criar o link e o destino, que chamamos de âncora. Exatamente como você viu no exemplo aqui mesmo. Isso tudo é feito da seguinte forma:
Passo 1.
Depois de escrever todo o seu artigo e finalizar sua edição, abra o código-fonte (HTML) no editor de texto (editor de postagens) onde você está escrevendo seu artigo.
No Blogger ou no WordPress, isso é uma aba no canto superior direito do editor de textos.
Vá ao ponto onde será feito o link inicial e escreva o seguinte código em torno das palavras que serão o link:
<a href=”#NOME-Ancora”>Palavras da âncora</a>
Veja que há o símbolo “#” junto de uma palavra que será a referência, algo que dê nome à âncora que está sendo criada e esse mesmo nome será usado no próximo passo.
Passo 2.
Agora é preciso criar dentro do texto o lugar de destino da âncora. Ali você também colocará um código, dizendo que é o lugar do nome escolhido e para onde o link será direcionado.
<a name=”NOME-Ancora”>Palavra para onde vai a âncora</a>
Note que onde está agora “name”, você repete o nome dado à âncora no primeiro passo, mas dessa vez sem o “#”. Desse modo o link saberá para onde está apontando e para onde vai.
Faça alguns testes e use quantas âncoras forem preciso para seu blog e seus artigos ficarem fáceis de ler e interagir.
Se você clicou na âncora do segundo parágrafo, viu que foi direcionado direto para o final do post. Para voltar ao terceiro parágrafo e continuar a leitura, aprendendo como fazer isso, clique nessa âncora Aprender a fazer âncoras.
Excelente postagem.
Realmente esse sistema de âncora é muito prático para quem está lendo e dá uma aparência mais profissional a postagem.
Alguns de meus artigos são extensos e vou adorar usar este recurso.
Podendo até montar um índice no começo da postagem.
Abraço
Roger Dance
tem um problema,si eu quiser colokar ancoras nas postagens do meu blog vou ter q editar a html de todas as postagens? ou tem algum jeito de editar todas as postagens de uma só vez?
Só é possível editando individualmente cada post, já que você precisará criar cada âncora para cada parte de seus posts.
Obrigado pelo Post. Esta era uma dúvida que tinha a muito tempo, mas nem sequer sabia que o nome do processo era "Criar âncora". Mas já que este é um processo que promove tanta praticidade na leitura, por que o Ferramentas Blog não costuma publicar artigos com âncoras?
Olá Marcos.
Gostei muito da postagem, só que quando tentei aplicar em meu blog senti uma certa dificuldade. Então pesquisando na internet descobri uma postagem do blog Htmhelen – com uma explicação um pouco mais detalhada. Que complementa com a sua matéria.
Gostaria de dividir essa descoberta para ajudar ainda mais o seu magnífico trabalho.
Link: http://www.htmhelen.com/2010/07/como-criar-links-de-rolagem-ancoras.html
Se achar de bom grado pode colocar o comentário ou sugerir esse link na postagem.
Abraço
Roger Dance
@Roger,
é até injusto comparar meus tutoriais com os da Helen. Ela é muito superior nesse tipo de conteúdo do que eu conseguiria tentar ser.
Obrigado pela indicação do link dela. Isso facilitará para quem não conseguir entender pelo processo que descrevi.
.
@Metal,
Eu tento aqui criar posts bem curtos e mais objetivos, por isso não uso esse tipo de recurso. Como meus textos são bem lineares, isso poderia confundir muita gente e quero que todos leiam os posts sem saltar parte para não perder detalhes.
Mas pode ser que eu venha usar mais isso, e escreve agora tutoriais mais complexos e longos.
Olá Marcos!
Apenas agradecendo por compartilhar. Muito útil pra mim. Dá um pouco de trabalho quando se tem uma lista com mais de 6 links, e o processo é manual.
No WordPress é automático?
Obrigado!
Abraço!
o procedimento para fazer isso no blogger é o mesmo? to querendo aprender fazer isso
Nossa… eu quebrei a cabeça pra fazer…
se não tiver o # não funciona foi por isso que eu n conseguia… mais agora ta certinho.
Quebrei a cabeça, mas deu certo.
Muito obrigada!
O problema era q ao copiar e colar o código, as aspas precisam ser modificadas ( nós precisamos de fato digitar aspas).
Valeu!
Olá, quero agradecer pelo post. Essa era uma dúvida recorrente. Mas houve um problema: o link não leva ao texto correspondente. Eu coloquei o primeiro código no título do sumário e o segundo no título do texto. Mas ao clicar ele não vai…
Olá, gostei muito da postagem. Essa era uma dúvida que tinha. Mas encontrei um problema: quando clico no tópico ele não encaminha para onde ancorei. Eu coloquei o primeiro código no título do menu e o segundo no título do post correspondente.