Boa noite pessoinhas amorosas *-* Achei um tutorial super fofo para os afiliados, e resolvi usar, e já trouxe para vocês, Achei ele no Goods Sweets. Usem bastante galera.
O efeito fica assim, quando passa o mouse em cima, fica cinza e redondo, como podem ver na imagem.
Vá até o seu HTML e procure por ]]></b:skin>. Depois que achar cole o seguinte código acima dele.
/***** EFEITO AFILIADOS POR GOODS-SWEETS.BLOGSPOT.COM ******/
.pb {
-webkit-transition-duration: .90s;
border: 4px solid #fbf5ff; /***** COR DA BORDA ******/
}
.pb:hover {
-webkit-transition-duration: .90s;
-webkit-filter: grayscale(85%);
-border-radius:180px 180px 180px 180px;
-moz-border-radius: 180px 180px 180px 180px;
-webkit-border-radius: 180px 180px 180px 180px;
border: 4px solid #fbf5ff; /***** COR DA BORDA EM HOVER ******/ opacity: 0.8;
cursor: crosshair;
}
.pb {
-webkit-transition-duration: .90s;
border: 4px solid #fbf5ff; /***** COR DA BORDA ******/
}
.pb:hover {
-webkit-transition-duration: .90s;
-webkit-filter: grayscale(85%);
-border-radius:180px 180px 180px 180px;
-moz-border-radius: 180px 180px 180px 180px;
-webkit-border-radius: 180px 180px 180px 180px;
border: 4px solid #fbf5ff; /***** COR DA BORDA EM HOVER ******/ opacity: 0.8;
cursor: crosshair;
}
Recomendo que mude apenas o que foi destacado. Para finalizar, abra um gadget de javascript e cole o seguinte:
<a href="Link do blog" title="Nome"><img class="pb" src="Link da Imagem" /></a>
<a href="Link do blog" title="Nome"><img class="pb" src="Link da Imagem" /></a>
<a href="Link do blog" title="Nome"><img class="pb" src="Link da Imagem" /></a>
<a href="Link do blog" title="Nome"><img class="pb" src="Link da Imagem" /></a>
<a href="Link do blog" title="Nome"><img class="pb" src="Link da Imagem" /></a>
Espero que gostem. Beijos
Nenhum comentário:
Postar um comentário
Olá que bom que veio comentar aqui no Blog da Ketty!
-Sem chingamentos;
-Leio os comentários de crítica construtiva sempre;
-Deixe o link do seu blog;
-Se for reblogar deixe um aviso.
-Agradeço a atenção. Ketty.