Como exibir pop-up ao passar o mouse sobre uma palavra • Ajuda do WordPress

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br


Como exibir pop-up ao passar o mouse sobre uma palavra • Ajuda do WordPress 2

Um recurso muito prático em sites técnicos ou que geralmente usa abreviações ou acrônimos de termos não muito comuns é exibir um pop-up quando você passar o mouse sobre a palavra ou abreviação em questão, contextualizar o visitante e evitar acumular mal-entendidos na leitura.

Eles são comumente conhecidos (em inglês) como dicas.

Bem aqui no blog, eu os uso de tempos em tempos, especialmente para mostre o significado de palavras técnicas, abreviações não muito comuns e até termos em inglês.

Se você está curioso e já pensou em usar este um recurso tão prático para os visitantes do seu site Aqui eu explico duas maneiras de fazer isso.

Textos pop-up com HTML

A maneira tradicional de exibir textos pop-up é através da tag HTML abbr.

A sintaxe é muito simples, assim como nos links, aqui está um exemplo:

E ficaria assim: Texto a explicar.

Como exibir pop-up ao passar o mouse sobre uma palavra • Ajuda do WordPress 3

Este método funcionará em todos os navegadores, ele apenas tem o problema de digitar manualmente o HTML sempre que quiser mostrar o texto pop-up.

Textos pop-up com plug-in

O que você pensaria programa automaticamente textos pop-up para acrônimos e abreviações que você usa regularmente e não ter que adicionar HTML toda vez que você usá-los?

Bem, existe um plugin que irá ajudá-lo nesta tarefa. Chama-se Text Hover e é muito fácil de usar, além de ter algumas opções muito úteis.

Depois de ativado, vá para a página de configurações (Ajustes> Texto suspenso) e use a área de texto para adicionar os termos para os quais você deseja exibir automaticamente um texto explicativo pop-up.

Como exibir pop-up ao passar o mouse sobre uma palavra • Ajuda do WordPress 5

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br

A sintaxe a ser usada é muito simples, por exemplo:

Você só precisa adicionar linhas, seguindo o modelo, com seus termos, acrônimos e abreviações, seguidos após o => o texto pop-up que você deseja mostrar ao visitante ao passar o mouse sobre o termo, o que será mostrado no seu texto com um sublinhado pontilhado, para distingui-lo do restante do texto.

As únicas regras que existem são:

  • Não use mais de uma linha por pop-up de substituição.
  • Você pode usar tags HTML básicas (href, strong, img etc.), mas não exagere, lembre-se de que é um texto pop-up, não um arquivo de produto ou algo semelhante.

É altamente recomendável marcar a caixa para melhorar a aparência dos textos pop-up, muito mais fáceis de ler do que o sistema nativo de navegadores.

Ficaria assim …

Como exibir pop-up ao passar o mouse sobre uma palavra • Ajuda do WordPress 7

A partir deste momento, você só tem a tarefa de alimentar termos, acrônimos, abreviações etc., com seus textos pop-up, as configurações do plugin.

VALORIZE E COMPARTILHE ESTE ARTIGO PARA MELHORAR A QUALIDADE DO BLOG …

(6 votos, média: 5)

Gostou deste artigo? Você não sabe o que está perdendo e YouTube!

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br
Leia Também  Faça-se servir, sirva e sirva a si mesmo