Í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 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-P4OIjne-7b_Iu1NhIeglVEpTIFcVOhFkdoDTYk6IMAm_iVvk6zdYsQchuPHFcmDAZ9RZJZCGbw83Q19y5LyKiyoPdOmc2HJzR3irU8MXC_qjIUObaoSFj9NmdoS82QI6qhifbLRZDY/s0/twitter.png' title='Twitter'/></a>
<a href='URL FEED'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-B9JkDWjN6e3wx10yQcFq36sL9S9NfXKoRe_jxUmYHFcOTI-9bNR4MEzWer8rI3SolR-yD7fJH3L7br9esSV_CRsdiVT-n6hnwNCeL8P-takrcVO2ttrf5sfcSf2btYkWgckAlb2yZ-Q/s0/rss.png' title='RSS'/></a>
<a href='URL FACEBOOK'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiluYmXnVk0AUjDvUszvc2jwByQy2VcbuzFWzoD65ew3GemQS98WE6cYGJ0UJ9lnGObHaXTVfVoLrxtp3DE2Osj8AyG72IhvbP0IupMmf3HmRpgz3PCaY6sV89GWCgYoNRlqhdxZNWx8Mo/s0/facebook.png' title='Facebook'/></a>
<a href='URL GOOGLE+'><img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzXDZYWgGzfUFB5KYQzEzJoHFT2mjTnIF8lP64GEdpJMema0pj1DY7AU2so_V0_LtaMEb3GyxnbtfFgirmzoX6H5sVEmj3KcKEiSK9iDOr3tAPaFrpad1FAzGL-rsim83-nreYIYc3FEQ/s0/google%252525252b.png' title='Google Plus'/></a>
<a href='URL YOUTUBE'><img alt='Youtube' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdXACh63_whfW1DndoLqEEEG6cUT4SNYSZicqC1cjdSfHWbfHZ3BeysGcCcTLkoT0zvkyazubjkNYpbuHvBA3scZ4RhnvPXWsJTdLhrOgY7jh8vts9Z32aHrHrTiqL5s4g-syZBtOxpGs/s0/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.