♦ Tutorial ~ Efeito Painel para Afiliados

   

Hey Rilakkumas!
Eu ainda não voltei de viagem, porém deixei esta postagem já pronta.
Esse efeito me deu um trabalho desgraçado porque eu comecei ele do zero, e ele não ficava do jeito que eu queria, demorei pelo menos uma tarde para descobrir o que tinha de errado #ModoAntaON.
Mas o resultado é muito lindo, a imagem parece uma só, mas no hover fica tudo preto e branco e o quadrado que você escolheu fica colorido, tem exemplo aqui em baixo para vocês verem, vale muito a pena usar.




|| IMPORTANTE ||

  Nesse tutorial você vai precisar do PHOTOSCAPE para dividir sua imagem, então caso você não tenha esse editor aconselho que espere o blog disponibilizar alguns modelos já prontos. Obrigado
Vá em Modelo >> Editar HTML e pesquise por ]]></b:skin> e cole esse código antes da tag.
.painel{ width:50px;
margin: -2px;
-webkit-transition-duration:2s;
-moz-transition-duration:2s;
-o-transition-duration:2s;
-ms-transition-duration:2s;
}
.painel:hover{
opacity:0.9;
-webkit-filter: grayscale(0%);
-webkit-transition-duration:2s;
-moz-transition-duration:2s;
-o-transition-duration:2s;
-ms-transition-duration:2s;
}
.efeito {
-webkit-filter: grayscale(0%);
    -webkit-transition:all 1.3s ease;
    -moz-transition:all 1.3s ease;
    -o-transition:all 1.3s ease;
}
.efeito:hover a {
-webkit-filter: grayscale(100%);
opacity:0.5;
}
.efeito a {
-webkit-filter: grayscale(0%);
    -webkit-transition:all 1.3s ease;
    -moz-transition:all 1.3s ease;
    -o-transition:all 1.3s ease;
}
.efeito a:hover {
-webkit-filter: grayscale(0%);
opacity:1;
}
Agora para que usar o efeito vá em Layout >> Adicionar um Gadget >> HTML/JavaScript e cole esse código.
<div class="efeito">
<a href="LINK_DO_BLOG" title="NOME_DO_BLOG"><img class="painel" src="URL_DA_IMAGEM" /></a>
</div>
Repita o código acima quantas vezes forem precisas, mas sempre dentro do </div> pois é ele quem fecha o efeito. Ou seja, apenas copie o código por completo várias vezes e substitua só o Link do blog, o Nome do Blog e a URL da imagem.

|| PARA DIVIDIR A IMAGEM ||

  Para dividir a imagem nesse estilo você vai precisar do PhotoScape, caso não tenha espere que eu posto algumas depois. Mas para fazer é só apertar no DIVISOR e escolher a imagem e selecionar em quantos quadros quer dividir, aperte em DIVISÃO e pronto.
Espero que tenham gostado! Só isso por hoje.

4 comentários:

  1. Esse efeito fica lindo. Vou usar na minha proxima elite. Ah tem tempos que não passo por aqui, esse layout ficou lindo de doer (dá até inveja). Parabéns pelo trabalho lindo de vcs.

    ResponderExcluir
  2. Eu já começando a comemorar aqui pensando que tinhas voltado. Este efeito me chamou bastante atenção quando o vi, eu imagino que deu trabalho, e como deu (uma tarde toda)! Enfim, o efeito é lindo. Abraços ~

    - Simply Thonn

    ResponderExcluir
  3. Esse efeito é perfeito <3 HUAHSUAHSUAHSUHAS
    Estou usando lá no Lovelly no Sekai. Volta logo Byel T~T

    Ja ne!~

    ResponderExcluir
  4. Eu já fiz no Photoshop, mas é super chato e dá muito trabalho ^^
    Valeu pelo tuto! Vou esperar os modelos do blog

    ResponderExcluir