Efeito CSS nas imagens de parceiros no seu blog

► +A +/- -A
Olá amigos leitores, hoje vim demostrando e fazendo um tutorial de como adicionar um efeito CSS nos parceiros do seu blog, o efeito é simples, mas moderno. Para visualizar o tutorial clique em "Continue a ler o artigo"
1. Faça login no Blogger
2. Em seguida no menu suspenso, clique em Modelo.
3. Em seguida clique no botão em Editar HTML
4. E procure pela seguinte tag:

]]></b:skin>

5. E acima do código Citado acima, adicione o seguinte código: 

.avatar-parceiros {
width: 100%;
float: left;
margin-left: 10px;
}
.avatar-parceiros a img{
margin-bottom:7px;-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.8);
box-shadow: 0px 0px 3px rgba(0,0,0,0.8);
-webkit-transition:All .3s ease;
-moz-transition:All .3s ease;
-o-transition:All .3s ease;
}
.avatar-parceiros a img:hover{-moz-box-shadow: 0px 0px 9px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 9px rgba(0,0,0,1);
box-shadow: 0px 0px 9px rgba(0,0,0,1);
-webkit-transition:All .1s ease;
-moz-transition:All .1s ease;
-o-transition:All .1s ease;
}

Utilizando no seu blog

1. No menu do Blog, clique em Layout
2. Em seguida clique em Adicionar um Gadget
3. Escolha a opção HTML/JavaScript
4. Dê um título ao Gadget
5. E no campo do Gadget adicione o seguinte código HTML:

<div class="avatar-parceiros"><a class='shadowMoreIcon' href='URL Do site do parceiro' target='_blank'><img class='rounded' src='URL do banner do parceiro' /></a><a class='shadowMoreIcon' href='URL Do site do parceiro'target='_blank'><img class='rounded' src='URL do banner do parceiro' /></a><a class='shadowMoreIcon' href='URL Do site do parceiro' target='_blank'><img class='rounded' src='URL do banner do parceiro' /></a><a class='shadowMoreIcon' href='URL Do site do parceiro' target='_blank'><img class='rounded' src='URL do banner do parceiro' /></a></div>

6. Após isso clique em Visualizar, e se estiver tudo corretamente como desejado clique em Salvar Modelo! 


Pronto pessoal! Esta foi a post de hoje, sem mais delongas! E lembrando desculpem a falta de posts, ando muito ocupado mas se Deus quiser voltarei com as postagens diárias! Até mais, Fiquem Com Deus, Abraços!

ATUALIZAÇÃO!
Confira a Demo do efeito na Oficina Tecnoblog:
http://tecnoblogoficina.blogspot.com.br/

OBS: Este exemplo encontra-se na sidebar. 
► Postagens Relacionadas:

9 Comentários

Henrique Queiroz disse...

Gostei do efeito é bem legal principalmente nos parceiros mesmo, testei nas postagens mas não ficou legal.. então parabéns pelo tuto!

14 de outubro de 2012 08:43
Caio Vinicius disse...

Olá Henrique.
Que bom que gostou do nosso tutorial, obrigado pelo comentário e participação, Volte Sempre! Abraços e fica com Deus.

14 de outubro de 2012 08:47
Herlan Santos disse...

Muito bom o efeito, testei e gostei.
Parabéns pela postagem.


Abraços!

14 de outubro de 2012 23:23
Caio Vinicius disse...

Olá Herlan.


Obrigado pelo comentário e pela participação, ficamos felizes em saber que você gostou, Obrigado, abraços.

15 de outubro de 2012 08:53
Beatriz disse...

Perfeito! *-*

16 de outubro de 2012 21:01
Caio Vinicius disse...

Que bom que gostou Beatriz! :D Obrigado pelo comentário.

18 de outubro de 2012 19:16
Edson disse...

Pode por favor dar algum demo ou alguma amostra em outro blog de como fica?

18 de setembro de 2013 21:28
Caio Vinicius disse...

Claro que posso Edson, me perdoe não ter postado e Obrigado por pedir irei postar o mais rápido possível.


OBS: Atualize a página daqui a 5 minutos, provavelmente estará com a Demo no post atualizado.


Abraços, amigo! :)

18 de setembro de 2013 21:35
Edson disse...

Interessante, vlw! Vou dar uma olhada se "contrasta" e como usá-lo no meu layout e etc, acho que acabei de achar a resolução para o meu problema.

19 de setembro de 2013 08:48

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!