Dia desses me perguntaram como linkar artigos. Isto é, como criar um link em cima uma palavra que escrevemos no post, a fim de que ela envie o visitante a outro site.
Isto partindo do pressuposto de que não se use a plataforma Blogger ou Wordpress. Pois nessas plataformas existem o recurso de inserção de links. Em alguns casos, também o recurso de se abrir em outra janela (ou página).
Aprenda a criar links para outros sites
Como acho a pergunta pertinente e eu mesmo uso esse recurso com frequencia, escrevi essa dica:
1) Suponhamos que eu escreva a palavra Flores e queira linká-la a a um site de venda de flores, chamado Flores Bonitas.
Suponhamos ainda que o endereço do site seja: http://www.floresbonitas.com.br (lembrando-lhe que esse site não existe).
Nosso link ficará assim:
<a href="http://www.floresbonitas.com.br">Flores Bonitas</a>
Se quisermos que o site abra mais rápido, escrevemos "/" logo após o link.
Assim, no link mudará para:
<a href="http://www.floresbonitas.com.br/">Flores Bonitas</a>
Caso queiramos que ele abra em outra página ou janela, escrevemos (target="_blank")logo após o link.
Desse modo, teremos:
<a href="http://www.floresbonitas.com.br/" target="_blank">Flores Bonitas</a>
Nesses casos, Flores Bonitas sempre aparecerão como links ativos, embora esse site não exista.
E se quisermos que Flores Bonitas sejam escritas na cor azul?
Acrescentamos a tag (font), assim: <font color="#0000ff">Flores Bonitas</font> no código que criamos.
E teremos:
<a href="http://www.floresbonitas.com.br/" target="_blank"><font color="#0000ff">Flores Bonitas</font></a>
onde # é colocado antes do código; e 0000ff é o código da cor azul.
Veja no website Mxstudio uma tabela de cores com dezenas de cores e seus códigos correspondentes.
Podemos escrever Flores Bonitas em negrito. Aí, acrescentamos antes dessas duas palavras a tag <b>:
<a href="http://www.floresbonitas.com.br/" target="_blank"><font color="#0000ff"><b>Flores Bonitas</b></font></a>
Se quisermos mudar para Itálico, trocamos o <b> por <i>:
<a href="http://www.floresbonitas.com.br/" target="_blank"><font color="#0000ff"><i>Flores Bonitas</i></font></a>
Todavia, você pode me perguntar: "E se eu quiser uma imagem em vez do nome do site?".
Nesse caso, faremos assim:
<a href="http://www.floresbonitas.com.br/" target="_blank"><img src="http://www.floresbonitas.com.br/imagem"></a>
Onde
http://www.floresbonitas.com.br/imagem é supostamente o endereço da imagem que aparece no link.
Como o Google recomenda nomear a imagem, usamos para isso as tags (alt) e (title), desse modo:
<a href="http://www.floresbonitas.com.br/" target="_blank"><img src="http://www.floresbonitas.com.br/imagem" alt="Flores Bonitas" title="Veja só que Flores Bonitas"></a>.
Geralmente escrevemos em (alt="") o título da postagem. E em (title=""), uma frase que incentive o leitor do blog a clicar na imagem e ir ao site que ela direciona.
A tag alt é obrigatória no blog ou site quando postamos imagem. Pois os buscadores penalizam os que não adicionam essa tag em suas imagens. Você pode colocá-la sempre após a tag img. É dentro dessa tag que o buscador copiará informações sobre seu post e colocará sua página quando alguém digitar uma palavra-chave.
Já a tag title mostra ao leitor um resumo do post ao encostar o ponteiro do mouse na imagem.
No entanto, o uso dessas duas tags nas imagens de seus artigos aumentará muito o rankeamento de seu blog ou site.
Só que, veja bem, estamos supondo um link para outro site e não para o seu.
Vamos supor agora, com exemplos práticos, um link para o próprio Aabaca Dicas.
<a href="http://www.aabaca.org/2011/03/dicas-de-sites-que-alteram-imagens.html" title="Dicas de sites que alteram imagens" target="_blank"><b>Dicas de sites que alteram imagens</b></a>
Dicas de sites que alteram imagens
Se você encostar o mouse no link acima lerá o título da postagem e se clicar nele será levado a uma página do Aabaca Dicas que abrirá em outra aba ou janela.
Falaremos mais sobre esse assunto em postagens futuras. Aguarde.
Veja mais sobre imagem nesse post do Aabaca.
Image: renjith krishnan / FreeDigitalPhotos.net
Nenhum comentário:
Postar um comentário
Parabéns. Muito obrigado por comentar.