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ê.
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.
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:
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!
Adorei,mas sou muito burra,rs...Com calma talvez consiga! bjs, chica
ResponderExcluirGostei sim e muito obrigada mais uma vez
ResponderExcluirmuito bom, funcionou ok
ResponderExcluirAdorei o tutorial :3
ResponderExcluirNO meu blog não funcionou. Eu uso um template pronto com alguns efeitos em java e css, será que deu alguma incompatibilidade? Ele não veio com nenhum efeito em link, ser´q eu teria que substituir alguma coisa? Obrigado.
ResponderExcluirParabéns pelo tutorial, muito didático e organização que facilita e muito o aprendizado. Obrigado.
ResponderExcluir