Tutorial: Efeito opacidade + borda

29/04/2025 - 14:48 | Oi gente! Faz tempo que não apareço por aqui, né? A correria do dia a dia tem sido intensa — entre trabalho, estudos e algumas metas pessoais, mal tenho conseguido parar pra respirar! Mas aos poucos as coisas estão se ajeitando, e decidi voltar com tudo pra compartilhar aquele conteúdo que ficou guardado no rascunho por tempo demais. Confesso que, mesmo com a agenda cheia, estava sentindo falta desse cantinho aqui. Escrever, organizar ideias e compartilhar aprendizados sempre foi uma forma de colocar a cabeça no lugar — e nada melhor do que voltar às raízes com HTML, que foi por onde tudo começou pra mim na web.

Tenho revisado alguns códigos antigos de HTML que ainda são super úteis, além de dicas práticas que podem ajudar quem está começando (ou até quem já está na estrada) a organizar e melhorar seu próprio blog. Minha ideia agora é ir soltando esses conteúdos aos poucos, sem tanta cobrança, mas com a mesma vontade de ajudar e trocar experiências com vocês. Se você também anda sem tempo, mas não quer deixar o blog de lado, fica comigo que vou trazer algumas dicas pra otimizar sua rotina de criação.

Se caso o efeito não funcionar aqui na postagem, vocês podem visualizar ele aqui em efeito {1}.

Vá até o painel do Blogger.
Clique em Tema > botão "Editar HTML".
Procure dentro da <head> do código do seu template a tag </style> ou </b:skin> (se já existir), ou crie uma nova seção <style> dentro da <head>:

<b:skin>
<![CDATA[
#B1 a img {
width: auto;
border: 1px solid #b8b8cf;
margin: -2px -10px -5px -10px;
width: 50px;
height: 50px;
opacity: 0.9;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#B1 a:hover img {
opacity: 0.5;
width: auto;
border: 1px solid #b8b8cf;
}
]]>
</b:skin>

Outra opção é inserir dentro de uma postagem, como essa que fiz:

Vá em Postagens > Editar ou crie uma nova postagem.
Troque para o modo HTML (no editor).
No início da postagem, adicione:

<style> #B1 a img {
width: auto; border: 1px solid #b8b8cf;
margin: -2px -10px -5px -10px; width: 50px; height: 50px;
opacity: 0.9;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;}
#B1 a:hover img { opacity: 0.5; width: auto; border: 1px solid #b8b8cf;} </style>

E quando for usar o efeito, use pelo HTML com o link da imagem que deseja usar:

<div id="B1"><a href="#"><img src="URL-DA-IMAGEM-AQUI" alt="Imagem Teste" /></a></div>

Vou pedir que não saiam da postagem sem dizer o que acharam do tutorial. Me contem se testaram e se deu certo, mas qualquer dúvida comenta aqui que eu posso ajudar vocês, ou me procurem nas redes sociais.

Facebook | Instagram | VSCO | Tumblr

Tutorial: Efeito opacidade + borda

2 comentários

Afiliados

Às Compras

Instagram