Um dos truques mais recentes para incrementar o visual de sites é mostrar, nos links para outras páginas, uma imagem de amostra do endereço indicado. A maneira mais prática de adicionar esse recurso a um site existente é usar o serviço Snap. Colocá-lo em uma página não é complicado e não é necessário substituir o código de todos os links, mas apenas adicionar um trecho de código no começo da página. Veja como configurar o visual das amostras que serão exibidas e como criar uma página com links do Snap, a seguir.

1) CADASTRO

Inicialmente, visite a página http://www.snap.com/about/spa1B.php. Será possível testar o funcionamento dos links com amostra do site, usando o atalho Try Snap Preview Here. Clique, então, em Get Started Now.

2) VISUAL E RECURSOS

Na página que aparece agora, é possível personalizar o visual da tela do Snap que será exibida ao passar o mouse sobre um link. Primeiro, escolha uma cor de fundo, dando preferência, claro, a uma tonalidade usada em seu site. Depois, escolha uma das três opções de exibição da amostra. Elas variam entre mostrar a tela do Snap ao passar o mouse sobre o link ou sobre o ícone ao lado. A melhor escolha é exibir a tela apenas ao apontar para o ícone (a segunda opção).

3) MAIS OPÇÕES

Agora, clique no ícone de + ao lado de Advanced Options. Será possível mexer ainda mais no visual da tela do Snap, permitindo eliminar o campo de busca. Assim, desmarque o item Search Box e também Preview Internal Links. Isso desabilita a exibição de amostras relativas a links de dentro do próprio site. Clique, então, em Continue.

4) DOMÍNIO E E-MAIL

Antes de obtermos o código que será usado nas páginas, devemos indicar a URL do site que usará as amostras do Snap, além de um e-mail para contato. O endereço do site é necessário para que o script do Snap seja capaz de diferenciar links internos de externos. Também será preciso concordar com a licença de uso do serviço, marcando a caixa de seleção I Agree With Terms & Conditions Below. Faça isso e clique em Continue.

5) CÓDIGO PRONTO

Depois de fazer todas as configurações do serviço, é gerado um código, que deverá ser copiado para as páginas que mostrarão os links com amostras. Abra um editor de texto básico, como o Bloco de Notas do Windows e copie o trecho de código que aparece na seção Copy Your Code. Vamos agora gerar uma caixa que permite aos usuários desabilitarem as amostras, caso eles queiram. Assim, clique na caixa de seleção abaixo de Optional. Espere alguns segundos e será gerado um segundo trecho de código, que cria um painel que desliga o Snap com um clique. Copie também esse código para o editor de textos. Grave os textos para poder adicioná-los em todas as páginas desejadas.

6) EDIÇÃO DA PÁGINA

Para concluir a instalação, devemos editar a página web que mostrará as imagens de amostra. As modificações não são complicadas. Será preciso copiar o primeiro trecho de código HTML apresentado no passo anterior, logo antes da tag , na página. O segundo trecho de código deve entrar no corpo da página, ou seja, entre as tags e . Grave a página modificada e faça um teste rápido abrindo-a no browser antes de enviá-la para seu provedor.

AMOSTRAS SEM SITE

Quem gostou da idéia do Snap, mas não tem um site, pode simular o mesmo efeito em qualquer página, usando um script para a extensão Greasemonkey (www.info.abril.com.br/download/4283.shtml), do Firefox. Trata-se do Floating Link Preview (www.info.abril.com.br/download/4772.html). Basta instalar o script e todos os links trarão uma amostra do site referenciado. É possível limitar a exibição de amostras a algumas páginas, acessando o gerenciamento de scripts no Greasemonkey.