Como Adicionar Links de Ancoragem no Blog

CONSIDERAÇÕES INICIAIS

Nesse tutorial, confira como adicionar links de ancoragem para seções específicas de uma postagem do seu blog, facilitando a navegação no conteúdo publicado.

Os links de ancoragem permitem a navegação dentro do conteúdo de uma mesma postagem ou em pontos diferentes de uma mesma página do blog, possibilitando a elaboração de sumários com acesso para cada tópico ou seção do conteúdo da sua postagem. Vale ressaltar que esse recurso é indispensável para facilitar a navegação em postagens mais longas, como no exemplo abaixo.

 

Acesso rápido: 1. Como adicionar um link de ancoragem? 2. Como elaborar um sumário com links de ancoragem? 3. Como adicionar uma lista de links com ancoragem? 4. Considerações finais 5. Tutoriais recomendados 6. Comentários

COMO ADICIONAR UM LINK DE ANCORAGEM?

Confira como adicionar um link de ancoragem em uma postagem do seu blog em 12 passos:

1º Passo: acesse a página inicial do Blogger.

2º Passo: selecione o nome do seu blog.

3º Passo: acesse a página de edição da postagem desejada.

4º Passo: altere o modo de exibição do conteúdo para visualização em HTML.

Caso não apareça o nome visualização, clique no ícone de um lápis e selecione o ícone dos sinais <>.

5º Passo: encontre o local que deseja inserir o ponto de ancoragem.

6º Passo: clique no local desejado e escreva o código abaixo:

<div id="nomedaancora"></div>

Clique aqui para copiar o código acima.

7º Passo: substitua o trecho nome da ancora por qualquer nome desejado para realizar a ancoragem.

8º Passo: altere o modo de exibição do conteúdo para visualização no modo escrever.

Caso não apareça o nome visualização, clique no ícone dos sinais <> e selecione o ícone do lápis.

9º Passo: clique em inserir link.

10º Passo: na janela seguinte, escreva o texto do link e no campo URL insira o trecho abaixo:

#nomedaancora

No trecho acima, substitua o texto nomedaancora pelo nome que colocou no código anterior.

Dica: no nome de ancoragem evite espaços ou termos com sinais de pontuação.

Exemplos:

<div id="nomedaancora"></div>

#nomedaancora

<div id="informacoes"></div>

#informacoes

<div id="conclusao"></div>

#conclusao

Observação: se o link de ancoragem for exibido em um resumo da postagem na página inicial do blog, então o link deve ser preenchido com todo o URL da postagem juntamente com o trecho #nomedaancora.

Exemplos:

<div id="nomedaancora"></div>

http://meublog.blogspot.com/p/contato.html#nomedaancora

<div id="imagens"></div>

http://meublog.blogspot.com/2025/12/publicacao45.html#imagens

11º Passo: clique em aplicar.

12º Passo: por fim, clique em Atualizar e confira o resultado diretamente no seu blog.

Dica: caso tenha dificuldade em encontrar o local que deseja inserir o ponto de ancoragem no modo HTML, ainda no modo escrever, identifique o ponto que será adicionado o ponto de ancoragem e adicione uma combinação única de caracteres, como por exemplo, @@@@. Após isso, altere o modo de visualização da página para visualização em HTML e clique em qualquer local dentro do código HTML exibido. Em seguida, no teclado, pressione as teclas CRTL e F para abrir a caixa de pesquisa e busque pela combinação única de caracteres que escreveu anteriormente, como no caso do exemplo @@@@. Após encontrar a combinação realizada, substitua a combinação pelo código descrito no sexto passo.

 

COMO ELABORAR UM SUMÁRIO COM LINKS DE ANCORAGEM?

Após a realização do procedimento anterior para inserir os pontos de ancoragem na sua postagem, pode ser realizado um sumário para organizar todos os links de ancoragem em um único local. Geralmente, o sumário é adicionado no início da postagem e deve listar os principais tópicos da postagem, facilitando a navegação e deixando o conteúdo mais organizado. Para elaborar um sumário com links de ancoragem, realize os 05 passos a seguir:

1º Passo: acesse a página de edição da postagem desejada.

Observação: observe se a exibição da página está no modo escrever.

2º Passo: clique no local que será inserido o sumário.

3º Passo: insira uma tabela com uma coluna e uma linha. Se preferir, copie uma das opções de tabela disponíveis abaixo.

 

Caso deseja inserir uma tabela no modo HTML apresentando cor sólida no plano de fundo, clique aqui.

Caso deseja inserir uma tabela no modo HTML apresentando uma imagem no plano de fundo, clique aqui. Nesse caso, deve substituir o trecho URL_DA_IMAGEM pelo URL da imagem que será exibida no plano de fundo.

4º Passo: insira os links de ancoragem dentro do sumário conforme o nono e décimo passo do procedimento anterior.

5º Passo: por fim, clique em Atualizar e confira o resultado diretamente no seu blog.

COMO ADICIONAR UMA LISTA DE LINKS DE ANCORAGEM?

Confira como adicionar um widget com uma lista de links de ancoragem no seu blog em 19 passos:

1º Passo: acesse a página inicial do Blogger.

2º Passo: selecione o nome do seu blog.

3º Passo: clique em layout.

4º Passo: clique em adicionar um gadget.

5º Passo: selecione o gadget HTML/JavaScript.

6º Passo: na janela seguinte, deixe o campo título em branco e preenche o campo conteúdo com o código abaixo.

<div id="nomedaancora"></div>

Clique aqui para copiar o código acima.

7º Passo: substitua o trecho nome da ancora por qualquer nome desejado para realizar a ancoragem.

8º Passo: clique em salvar.

9º Passo: repita o mesmo procedimento outras vezes para criar outros pontos de ancoragem, na qual, cada ponto de ancoragem deve ter um nome diferente.

Exemplo: esse procedimento pode ser realizado umas três vezes para adicionar três pontos de ancoragem, o primeiro com o nome CONTEUDO, o segundo com o nome COMENTARIOS e o terceiro com o nome RODAPE.

<div id="CONTEUDO"></div>

<div id="COMENTARIOS"></div>

<div id="RODAPE"></div>

10º Passo: arraste cada gadget adicionado para um elemento diferente do blog, como por exemplo, o gadget marcado com “CONTEUDO” para próximo das postagens, o gadget marcado com “COMENTARIOS” para um local próximo aos comentários e o gadget marcado com “RODAPE” para a parte inferior do rodapé.

11º Passo: na página do layout, clique em salvar para confirmar a organização dos widgets.

Caso não apareça o nome salvar, clique no ícone de um disquete na parte inferior da tela.

12º Passo: clique novamente em adicionar um gadget.

13º Passo: selecione o gadget lista de links.

14º Passo: clique em adicionar um novo item.

15º Passo: no campo nome do site, preencha com o nome do link.

16º Passo: no campo URL do site, preencha com o trecho abaixo.

#nomedaancora

No trecho acima, substitua o texto nomedaancora pelo nome do ponto de ancoragem, como nos exemplos abaixo.

Exemplos:

Nome do site: Visualizar conteúdo

URL do site: #CONTEUDO

Nome do site: Visualizar comentários

URL do site: #COMENTARIOS

Nome do site: Ir para rodapé

URL do site: #RODAPE

17º Passo: após adicionar todos os itens necessários, clique em salvar.

18º Passo: arraste o widget com os links de ancoragem para o local desejado.

19º Passo: por fim, na página do layout, clique em salvar para confirmar a organização dos widgets.

Vale relembrar que se não aparecer o nome salvar, clique no ícone de um disquete na parte inferior da tela.

Caso deseje adicionar um link para um ponto de ancoragem dentro de uma página especifica, deve adicionar o URL completo da página juntamente com #nomedaancora, como nos exemplos abaixo:

Nome do site:

URL do site: https://meublog.blogspot.com/p/contato.html#nomedaancora

Nome do site: Objetivo

URL do site: https://meublog.blogspot.com/p/contato.html#objetivo

Nome do site: Sobre a privacidade

URL do site: https://meublog.blogspot.com/p/contato.html#privacidade

 

CONSIDERAÇÕES FINAIS

Dessa forma, utilizando o código <div id="nomedaancora"></div> é possível realizar pontos de ancoragem tanto nos elementos do blog, quanto em seções de postagens ou páginas específicas. Por fim, elaborando links com o URL #nomedaancora é possível adicionar links com acesso direto para os pontos de ancoragem adicionados no blog.

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos sobre a elaboração de links de ancoragem e como podem ser utilizados na elaboração de sumários e lista de ancoragem.

 

TUTORIAIS RELACIONADOS

 

Por: Santos. Elaborado em: 24/12/2025. Publicado em: 24/12/2025. Atualizado em: 25/12/2025. Obrigado pela sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou entre em contato conosco.