Ícones sociais com efeito de opacidade

A dica que eu quero compartilhar como vocês hoje são Ícones Sociais; são os chamados “Social Icons” e como o titulo já diz vem com um charmoso efeito de opacidade alcançado através de CSS.

O resultado final será uma bela caixa de Subscrição com efeito de opacidade como a seguinte:

Como adicionar ícones sociais com efeito de opacidade no blog?

Para adicionar no seu blog cole o código abaixo em um elemento HTML/Javascript:

Social Icons

‘URL TWITTER’>
‘URL FEED’>
‘URL FACEBOOK’>
‘URL GOOGLE+‘>
‘URL YOUTUBE’>

Substitua o que estado destacado em vermelho pelos links correspondentes.

Agora para adicionar o efeito de opacidade, entre em Editar HTML  e acima de ]]> cole o seguinte:

#social {
margin: 15px 0 5px -15px;
width: 300px;
height: 40px;
text-align: center;
}
#social img {
margin-left: 3px;
margin-right: 3px;
}
#social img:hover {
opacity: 0.6;
}

Simples, não? Com isto terminamos o tutorial,espero que lhe seja útil.