Í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.
icones sociais
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.

1 comentários:

  • diquinhascapilares says:
    17 de agosto de 2017 às 17:59

    Oiiii!!!!!! Deu certo! Amei!!! :D Muito obrigada!!!

Postar um comentário

Por favor leia antes de comentar:

1. Escreva apenas o que for referente ao tema;
2. Ofensas pessoais ou spam não serão aceitos;
3. faço parcerias por meio de comentários;
4. Para entrar em contato nosso msn bloggeresites@hotmail.com;
5. Obrigado por sua visita e volte sempre.