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 adicionar ícones sociais com efeito de opacidade no blog?
Para adicionar no seu blog cole o código abaixo em um elemento HTML/Javascript:
<h2>Social Icons</h2>
<div id='social'>
<a href='URL TWITTER'><img alt='Twitter' src='http://4.bp.blogspot.com/-CH2EJeZxXvE/T8glI8bKNAI/AAAAAAAACPY/fsmkcRrB8tU/s000/twitter.png' title='Twitter'/></a>
<a href='URL FEED'><img alt='Feed' src='http://1.bp.blogspot.com/-rZ_cODG_QCk/T8glJDn031I/AAAAAAAACPg/vN0IgZlOx0c/s000/rss.png' title='RSS'/></a>
<a href='URL FACEBOOK'><img alt='Facebook' src='http://2.bp.blogspot.com/-iCU7Y8Du4j0/T8glJCXTJtI/AAAAAAAACPo/39McBmTnHt8/s000/facebook.png' title='Facebook'/></a>
<a href='URL GOOGLE+'><img alt='Google Plus' src='http://2.bp.blogspot.com/-eXigEPadqvA/T8glJXRIr0I/AAAAAAAACPw/qMVvMEflU-8/s000/google%252525252b.png' title='Google Plus'/></a>
<a href='URL YOUTUBE'><img alt='Youtube' src='http://4.bp.blogspot.com/-GKl3FrmoFGg/T8glJojFJHI/AAAAAAAACP0/4EtXMSmC-nc/s000/you_tube.png' title='Youtube'/></a>
</div>
Substitua o que estado destacado em vermelho pelos links correspondentes.
Agora para adicionar o efeito de opacidade, entre em Editar HTML e acima de ]]></b:skin> 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.
Oiiii!!!!!! Deu certo! Amei!!! :D Muito obrigada!!!