Tutorial: Gadget Seguidores com efeito hover

Oi oi gente, vim trazer um tutorial que me pediram no Skype, de como fazer esse efeito nos Seguidores preto e branco, ou melhor, HOVER, na verdade é bem simples, quando o gadget está normal, ele fica preto e branco, e quando colocamos o mouse em cima, ele fica na cor normal, isso inclui o titulo ~Ribbons também~ Ele ficara assim:

Gosto? Lets Go!

Entre no HTML do seu blog >> Pesquise: b:skin> 

Logo acima da tag cole o código abaixo:

#Followers1 {

text-decoration: none !important;

-webkit-filter: grayscale(100%);

-webkit-transition-duration: .90s;

margin-bottom: 25px;

}

#Followers1:hover {

text-decoration: none !important;

-webkit-filter: grayscale(0%);

-webkit-transition-duration: .90s;

margin-bottom: 25px;

}

Usando o efeito em um gadget de seguidores personalizado por código HTML em gadget:

Se o seu gadget de Seguidores for por código HTML como é aqui no blog, por ser personalizado, você terá que fazer um pouquinho diferente...

A TAG #Followers é o ID do seu gadget de seguidores, ele é padrão para todos os blogs, se ele não for personalizado, mas sendo ele personalizado como um código em um gadget, você terá que fazer assim:

Entre no HTML do blog de novo >> Pesquise o Título do seu gadget de seguidores  >> Veja o código abaixo do título, vai ter algo similar a isso:

A parte destacada em negrito é o ID do seu gadget, copie ele e cole o ID no lugar de  #Followers e faça a mesma coisa que manda acima. O seu código ficará mais ou menos assim:

#Coloque o seu ID {

text-decoration: none !important;

-webkit-filter: grayscale(100%);

-webkit-transition-duration: .90s;

margin-bottom: 25px;

} 

#Coloque o seu ID:hover {

text-decoration: none !important;

-webkit-filter: grayscale(0%);

-webkit-transition-duration: .90s;

margin-bottom: 25px;

}

Agora vizualize e veja se deu certo e se não tem nenhum erro no Blog, está tudo certo? O seu gadget ficou Preto e branco? Agora é só salvar!!

Pedidos? É só digitar o seu pedido ali no Ask.fm. Beijos