Efeito CSS nas imagens de parceiros no seu blog

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.