Como colocar efeitos variados nos links dos posts do blog - * Blog Elaine Gaspareto *

Como colocar efeitos variados nos links dos posts do blog

em 29/08/2017

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:


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












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 #.




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:


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!



2 comentários via Blogger
comentários via Facebook

2 comentários:

  1. Adorei,mas sou muito burra,rs...Com calma talvez consiga! bjs, chica

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…



Visualizações

Contando...

Dias online
Postagens
comentários