Estilizando links visitados

Fazer com que a navegação dos visitantes de seu site seja a melhor possível é uma busca insessante! A todo instante estamos tentando melhor aqui, um código jQuery para cá, um CSS para lá, tudo para que o visitante se sinta bem quando acessar o site.

Como então fazer com que o usuário saiba os artigos que já leu?

Links visitados

Quase toda a navegação pelo site é feita através de links, logo se um link de um artigo já foi visitado, o artigo em questão já foi lido por aquele usuário! Então o que devemos fazer é estilizar de um modo diferente aqueles links que já foram visitados.

Como estilizar o link visitado?

Para estilizar um link visitado, basta aplicarmos o estilo em questão em uma pseudo-classe CSS chamada “visited”, para usá-la, fazemos algo semelhante ao “hover”, vamos ver o código para ficar mais claro?

HTML

{code type=html}
<a href=”http://www.google.com”>Example Link</a>
{/code}

CSS

{code type=css}
a:link {
font-size: 40px;
color: #222;
}

a:visited {
display: block;
width: 300px;
height: 300px;
border: solid 4px green;
margin: 10px;
padding: 20px;
outline: solid 4px red;
float: left;
background: black;
font-family: sans-serif;
font-size: 100px;
font-weight: bold;
font-style: italic;
letter-spacing: 20px;
border-radius: 20px;
text-decoration: none;
color: limegreen;
}
{/code}

Calma, eu explico

No primeiro bloco CSS, temos a estilização do Link propriamente dita, ou seja como ele irá aparentar sem nenhuma ação, sem mouse focando, sem visitas. No segundo bloco, temos a estilização do link visitado, feito através do “a:visited”.

Demonstração

Para ver nosso tutorial em ação, clique AQUI

O que achou? Já conhecia? Conhece outra forma de fazer? Comente!

Receba as melhores dicas para criar um negócio digital lucrativo

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br