Como colocar efeitos variados nos links dos posts do blog

Uma das coisas que eu mais gosto de testar no blog são os efeitos simples que dão aquele charme extra aos posts, sabe?
Ao longo do tempo eu já compartilhei alguns na categoria Dicas para blogs.
Hoje quero te mostrar alguns efeitos legais que podem ser aplicados aos links de seu blog.
Vamos fazer um teste?
Clique neste link abaixo:

Sorteio de Quem tem medo de escuro

Legal, né?
E não é só esse efeito, tem alguns outros pra você escolher qual mais te agrada:

Da esquerda para a direita

Da direita para a esquerda

Acima e abaixo opostos

Do centro para os lados

Dupla, do centro para os lados

Borda completa

Borda completa 2

Animação de fundo

Efeito 3D

Como colocar os efeitos em links dos posts do blog?

Quer aprender como ter em seu blog?
Vou te mostrar 2 modos, ok? Um geral, que aplicará o mesmo efeito em todos os links do post, incluindo imagens, e outro mais trabalhoso ( pero que no mucho) que permite definir manualmente qual efeito aplicar, em quais posts e em quais links (meu preferido).
Para começar  escolha o método que deseja usar.
Como você verá deixei tudo separadinho na página de códigos.

Aplicando o efeito escolhido em todos os links do blog

Esse é o método mais fácil de todos. O único problema que eu achei e não consegui solucionar foi que o efeito é aplicado também às imagens dos posts; se você não se importa então esse é o método indicado pra você.

Faça assim: acesse a página com os códigos todos e selecione qual quer testar:


Copiar os códigos deste método

Agora acesse o painel de seu blog e clique na aba Tema (ou Modelo, é a mesma coisa). Escolha Editar HTML.
A seguir tecle Ctrl+F dentro da caixa do código fonte de seu template. Na barra de pesquisa que expandir digite ]]></b:skin> e tecle Enter para localizar.

Acima de ]]></b:skin> cole o código do efeito que você escolheu.

Ajuste as cores que desejar e salve. Sim, só isso.

Importante:

Lembre que todas as cores são precedidas do sinal #, então se quiser alterar é só alterar o código hexadecimal, ok?

A cor do link é a cor padrão dos links de seu blog, definido por color: $(link.color);

Caso queira mudar basta apagar $(link.color) e no lugar colocar o código hexadecimal da cor que desejar, sempre precedido de #.

Aqui tem uma tabela de cores e seus códigos hexadecimais.

Aplicando o efeito escolhido apenas em determinada postagem

Esse é meu método favorito porque me dá controle sobre onde e como usar o efeito, ou os efeitos que eu quero.
Dá mais trabalho, mas em compensação me permite usar mais de 1 efeito no blog, e definir exatamente onde ele aparecerá.
Para aplicar esse método acesse a página com os códigos específicos e deixe-a aberta:


Copiar os códigos deste método


Vá ao painel de seu blog e escreva seu post normalmente (ou faça um post qualquer em um blog de testes, recomendo isso), como está acostumad@.
Depois de tudo pronto clique em HTML, no alto do editor de postagens.
Essa ação, como eu sempre digo, reverterá seu post para o modo html.
Role a página até o final e após o fim do post cole o CÓDIGO CSS do efeito escolhido.

Aí, no local onde deseja que apareça o link com efeito cole o CÓDIGO HTML do efeito escolhido.
Vamos supor que seja esse efeito:

Acima e abaixo opostos

O código HTML será esse:

<a class="duplocentro" href="LINK AQUI">Acima e abaixo opostos</a>

E o código CSS será esse:

<style>
a.duplocentro {
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-size: 18px;
  line-height: 26px;
  padding: 0 0 6px;
}

a.duplocentro:before,
a.duplocentro:after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 3px;
  background: #333;
  transition: left .8s;
}

a.duplocentro:hover:before {
  left: 0;
}

a.duplocentro:after {
  top: auto;
  bottom: 0;
  left: auto;
  right: -100%;
  background: #333;
  transition: right .8s;
}

a.duplocentro:hover:after {
  right: 0;
}
</style>

Importante:
Como eu disse antes, todas as cores são personalizáveis, basta trocar o código que aparece após o sinal # e a cor será alterada.
Se quiser mudar o tamanho da fonte basta alterar conforme mostro no vídeo.
Leia o código, ele te dirá a maioria das coisas que podem ser alteradas.

Para não deixar dúvidas quanto aos efeitos eu gravei a execução do tutorial em um post de testes.
Nele, apenas como exemplo, escolhi um efeito e mostrei como é simples aplicar em um link do post.
Aperta o play!

Aproveite e se inscreva no canal de tutoriais do blog.
Não é bem um canal do Youtube, é essencialmente um apoio aos tutoriais do blog, mas sua inscrição ajuda muito na divulgação do meu trabalho.
Se inscreve aí, mig@s!