Efeito nos Afiliados

   Oi gente linda! Sexta-feira chegou e eu estou aqui com o primeiro tutorial que faço no blog para vocês ^^ Caso tenha algum tuto a pedir ou algum goodie, basta deixar um comentário ou então vá ao meu ask e me peça lá, mas tem de dizer que é este blog, pois eu também posto em outros blogs e aí não sei onde foi que você me viu ^^"

   Mas bem, fui eu que criei este efeito, pegando-o em um outro. Por isso, os créditos são daqui mesmo e se quiser saber qual foi o efeito que peguei foi desse blog aqui. Oki? Então, o efeito é esse, se chama: "Efeito para Afiliados 1":

LIVE PREVIEW

   Gostou? Então clica em "Leia Mais" para saber como fazer :3

   Bem, o efeito é bem simples de se fazer! Começamos por abrir o painel de html do blog e clica em: Ctrl +F, aí vai surgir uma barrinha e nela cola este trecho:

]]></b:skin>

   Achou? Muito bem, agora acima desse trecho, você vai colar isto:

.star{
background:#48569d;
padding:2px;
margin: 1px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-filter: none;
}
.star:hover{
background:url(URL_DA_IMAGEM_DE_TRÁS) repeat;
background-position:bottom left;
background-position:bottom left, top right, 0 0, 0 0;
-webkit-filter: grayscale(0.7);
}

   Pronto, altere a imagem, no caso, eu utilizei essa: aqui, pode utilizar, não haverá problema. E se quiser, altere a cor da borda, que é o que está a roxo, utilize esse site aqui. Visualize e se estiver tudo bem, salve!

   Agora, vá ao esquema do seu blog e abra uma aplicação de HTML/JavaScript e nela, cole:

<a target='_blank' title='NOME_DO_BLOG' href="URL_DO_BLOG"><img class="star" height="ALTURA_DA_IMAGEMpx" src="http://img836.imageshack.us/img836/3347/wdy.png" width="LARGURA_DA_IMAGEMpx" /></a>

   E salve! Será o resultado do Preview, espero que tenha gostado! Se utilizar comente, oki? >.< Beijos de Baunilha gente!