quarta-feira, 22 de junho de 2011
Como linkar uma parte específica dentro de um post no Blogger - Âncora de Links Internos
Tenho certeza de que muitos de vocês que possuem um blog, já presenciaram artigos onde um link dentro deste artigo redirecionava para uma parte específica dentro do mesmo post. Seja para explicar uma determinada parte de um artigo extenso, por exemplo.
Se você ainda não entendeu do que se trata, eis aqui um exemplo básico: Por favor, clique sobre o link abaixo e veja o resultado.
Você foi levado ao final do artigo, certo? Pois bem, isso chama-se Âncora de Links Internos.
Eu costumo usar bastante este recurso em alguns dos meus posts. É ideal para deixar o leitor mais satisfeito e à vontade, quando se trata de um artigo grande ou de uma explicação direta.
ADENDO IMPORTANTE! Este recurso só funciona quando o editor do post está na guia Editar HTML. Portanto, deixe para aplicar este recurso somente após ter escrito e revisado todo o seu artigo.
Códigos a serem usados
O recurso resume-se a apenas dois códigos HTML.
<a name="NOME-ANCORA"></a>
=> Este código acima é o código da àrea alvo do artigo, a qual o leitor será levado.
<a href="#NOME-ANCORA">TITULO DO LINK</a>
=> Este código acima cria o link clicável, o qual será clicado pelo leitor para que ele seja encaminhado até a parte específica.
- Os textos azuis são os nomes da âncora, o principal ponto neste recurso. Nas áreas azuis os nomes devem ser exatamente iguais.
- O nome em vermelho é o título do link que o leitor deverá clicar.
- Os textos em azuis não são mostrados no post após publicado. Apenas o que está no campo em vermelho.
Como usar os códigos
Passo I
1. Após ter escrito o seu artigo, clique na guia Editar HTML do post.
2. Vá até a parte do post onde o visitante terá de clicar para ser guiado até a parte específica. Coloque este código abaixo:
<a href="#">NOME-ANCORA">TITULO DO LINK</a>
Clique aqui para copiar o código
Clique aqui para copiar o código
3. No local de "NOME-ANCORA" coloque um nome relacionado ao seu artigo. Por exemplo, no meu vou pôr: seu-tutorial. E no campo "TITULO DO LINK", o título do link que levará o leitor até a parte pré-definida. Por exemplo: clique aqui. No nosso caso, ficaria assim:
<a href="#seu-tutorial">clique aqui</a>
Veja as demonstrações abaixo
Até aqui tudo bem? Então vamos lá...
Passo II
1. Agora simplesmente localize a parte do artigo para onde o leitor será levado, quando ele clicar no link que você criou.
2. Chegando lá, coloque o código abaixo antes do texto alvo:
<a name="NOME-ANCORA"></a>
Clique aqui para copiar o código
Clique aqui para copiar o código
3. Na área em azul insira o mesmíssimo nome que você colocou no "NOME-ANCORA" do código anterior (do Passo I). No nosso exemplo o nome preenchido foi 'seu-tutorial'. Portanto, o nosso código ficará assim:
<a name="seu-tutorial"></a>
Veja as demonstrações abaixo
Juntando ambos os códigos, somaremos um resultado de:
<a href="#seu-tutorial">clique aqui</a>
<a name="seu-tutorial"></a>
<a name="seu-tutorial"></a>
Certo?
Passo III
1. Ainda em Editar HTML, clique em Visualizar e veja se o resultado deu certo. Estando tudo ok, publique seu artigo.
Lembre-se de não sair do Editar HTML. E se for editar o artigo mais tarde, edite-o em Editar HTML mesmo, e não em Escrever.
Se você não estiver no campo Editar HTML do post, e estiver no campo Escrever, o Blogger vai gerar automaticamente o seu blogID no meio dos códigos. Sendo assim, ele não vai reconhecer nenhum dos códigos quando o conteúdo for publicado. Contudo, o efeito não dará certo e o resultado será insatisfatório!
Por isso o recomendável é terminar o seu artigo, e acrescentar o que tiver de acresentar, ajustar o que tiver que ajustar, e só depois, no final de tudo, inserir os códigos da Âncora de Links.
Qualquer dúvida é só postar nos comentários!
GOSTOU?
Artigo escrito por Marcelo
Sou formado em Sistemas de Informação pela UFMG e pós-graduado em Segurança da Informação. Trabalho com TI há mais de 5 anos e sou professor particular de inglês. Nas horas bem vagas costumo arranhar uma guitarra e sou fã do bom e eterno rock'n'roll.
Receba as atualizações automaticamente
Muito legal esta postagem. Parabéns!
ResponderExcluirA Internet brasileira precisa muito de conteúdos interessantes, divertidos e positivos como estes que você está criando.
Convido você a conhecer também o novo agregador Super Links: http://www.superlinks.blog.br
Confira o melhor conteúdo da Internet, aproveite para divulgar seus links gratuitamente sem necessidade de cadastro, sem fila de espera, tenha seus links divulgados em nosso site, Facebook e Twitter e aumente exponencialmente as visitas de seu blog.
Caraca!!!!!! Manooooooooo Eu te amoooooooooooo!!!!!
ResponderExcluirSe pudesse te dava um beijoooooooooo (Tá nem tanto ~~)
Mas caraca muito obrigado mesmo ^^ Parabéns por tudo, sou se fã agora!!!!!
So funciona o blogger???
ResponderExcluirO webnode não esta reconhecendo o segundo codigo.
O que leva o usuário para o texto em questão.
Sim, só no Blogger, como foi informado no título deste post.
ExcluirGrata!!! Rodei a internet inteira e só fui encontrar a solução para os links internos que funcionassem aqui!!! :)
ResponderExcluirMuito agradecido. Faz tempos que eu precisava disso para usar em umas páginas do meu blog romaryw.com.br
ResponderExcluirInfelizmente não certo pra usar em botões, mas já quebra o galho. Obrigado.
Amigo, sou professor de inglês e abri um blog para meus alunos. Eu gostaria de saber como você faz para postar em um blog uma parte específica de outro site. por exemplo, tentei levar pra dentro do meu blog uns exercicios, usando F'12 CTRL B COPIAR INNER HTML. até que deu certo, mas foram coisas do site que eu não queria.
ResponderExcluirpor favor me ajude de um jeito pra leigo em html
segue o link da minha powtagem, como ficou no blog
http://alexferneda.blogspot.com.br/p/blog-page_20.html
observe os exercicios como ficou, mas o que tem abaixo eu nao queria
agradeço a força ai