Tutorial - Efeito na opacidade das imagens de parceiros

O tutorial que eu vou mostrar é totalmente do Kawaii World, todos os créditos a ele.Quando você passa o mouse por cima dos parceiros, acontece isso:

Como pode ver a imagem onde a seta esta fica mais escuro ,e o resto fica mai claro!

Vamos ao tutorial:

1° passo: Acesse o painel do Blogger , escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2°passo: Agora usando o Ctrl F, procure por: </b:skin> 


3°passo: Acima dele cole:

#parceiros { opacity: .80; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; } #parceiros:hover a { opacity: .20; } #parceiros a { opacity: .80; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; } #parceiros a:hover { opacity: .99; }

4°passo: Crie uma Gadget Html/Javascript e cole o seguinte código:

<div id="parceiros"><a href="http://monstersinteractive.blogspot.com.br/" title="iMonsters"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio47U-0rP7hSOWJvKXsFX3OZTPlnXOEoKa6qMstHHLUQeu0pRo2MP5XSfjcbfwVk0se3sFs8f93Ip2jul99IbqxGeqknkSvMjh2OfZk0kIU40ds5JMm5InMecMcncDgRJ4xhwmspLxNClq/s1600/1404.png" class="afiliados"/></a> <a href="http://www.blogsweetgirls.com/" title="Sweet Girls"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio47U-0rP7hSOWJvKXsFX3OZTPlnXOEoKa6qMstHHLUQeu0pRo2MP5XSfjcbfwVk0se3sFs8f93Ip2jul99IbqxGeqknkSvMjh2OfZk0kIU40ds5JMm5InMecMcncDgRJ4xhwmspLxNClq/s1600/1404.png" class="afiliados"/></a> <a href="http://magicamenteinesplicavel.blogspot.com.br/" title=" Magicamente Inexplicável"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio47U-0rP7hSOWJvKXsFX3OZTPlnXOEoKa6qMstHHLUQeu0pRo2MP5XSfjcbfwVk0se3sFs8f93Ip2jul99IbqxGeqknkSvMjh2OfZk0kIU40ds5JMm5InMecMcncDgRJ4xhwmspLxNClq/s1600/1404.png" class="afiliados"/></a> <a href="http://s2hay.blogspot.com.br/" title="Salsita"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio47U-0rP7hSOWJvKXsFX3OZTPlnXOEoKa6qMstHHLUQeu0pRo2MP5XSfjcbfwVk0se3sFs8f93Ip2jul99IbqxGeqknkSvMjh2OfZk0kIU40ds5JMm5InMecMcncDgRJ4xhwmspLxNClq/s1600/1404.png" class="afiliados"/></a></div>

Só isso! Simples não? Salve e cheque se deu tudo certo, caso dê algum erro, repita o processo.

Share This :