Redes Sociais com Efeito Hover


Um gadget simples com um efeito bem legal para seu blog.


Normal
Hover

Vá em Layout => Adicionar um Gadget => HTML/JavaScript






<style>
/* menu hover--------------------------------------------- */
#menuhover {
display: inline;
}
#menuhover li {
list-style-type:none;padding: 0 2px;
}
#facebook1 {
background: url(https://4.bp.blogspot.com/-NRp55ugCG9U/WMg24563aPI/AAAAAAAABoo/7Raw6qRxgvQXOqEaLjHYfz2n-ZurmrHgwCLcB/s1600/rsf1.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#twitter1 {
background:url(https://3.bp.blogspot.com/-3FHBqpKC9YI/WMg25n1j4YI/AAAAAAAABpE/ZJMEn88YrRs_CsEeb5exQHnGynjy9lb2ACLcB/s1600/rst1.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#G1 {
background: url(https://3.bp.blogspot.com/-RkwH4qNJPLM/WMg25NwtxVI/AAAAAAAABo0/RfaQueECQYMHNeedP5Y4Bb-eu5xf-z_hQCLcB/s1600/rsg1.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#Instagram1 {
background: url(https://1.bp.blogspot.com/-mWIWe6V9_To/WMg25XIf8QI/AAAAAAAABo8/TGGyMzO_6zkFtgHzcQvW2CQzA0CARJFJwCLcB/s1600/rsi1.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#youtube1{
background:url(https://2.bp.blogspot.com/-4Gv_tU2WrAs/WMhKNK813hI/AAAAAAAABpY/b64zjDbckBITqmFSroJHAZhmYRlRPsbdQCLcB/s1600/rsy1.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
/*hover*/
#facebook1:hover {
background: url(https://4.bp.blogspot.com/-LfI-U_2cXNI/WMg244c320I/AAAAAAAABos/q6u6MidfLAEl3fuEIQBcgxCgwWP3eApUQCLcB/s1600/rsf.png)  0 0 no-repeat;
}
#twitter1:hover {
background: url(https://2.bp.blogspot.com/-EXCykDFLuWg/WMg25nohkQI/AAAAAAAABpA/lh3qxGgEoSY2RC5X6vPqqvKsRt_cql-owCLcB/s1600/rst.png)  0 0 no-repeat;
}
#G1:hover {
background: url(https://1.bp.blogspot.com/-DxUNhkcLPAY/WMg25OqVQAI/AAAAAAAABow/tdSUyHIj1DkGLBcZMStE7VD8QKKOV4J9gCLcB/s1600/rsg.png) 0 0 no-repeat;
}
#Instagram1:hover {
background: url(https://2.bp.blogspot.com/-zQE7G-zRqrA/WMg25fDdjuI/AAAAAAAABo4/MvqHpnP2rdw0h6ASqdXkWN0jOH1hFWUtgCLcB/s1600/rsi.png) 0 0 no-repeat;
}
#youtube1:hover {
background: url(https://2.bp.blogspot.com/-AlRwKxmXvNE/WMhKNC2KqFI/AAAAAAAABpc/JOutG_ksEMo-aP2iDuEdjrblIjd3YCGLgCLcB/s1600/rsy.png) 0 0 no-repeat;
}
</style>
<div id="menuhover">
<ul>
<li><a href="ENDEREÇO DO FACEBOOK" id="facebook1" target="_blank" title="Facebook"></a></li>
<li><a href="ENDEREÇO DO TWITTER" id="twitter1" target="_blank" title="Twitter"></a></li>
<li><a href="ENDEREÇO DO G+" id="G1" target="_blank" title="Siga-me no G+"></a></li>
<li><a href="ENDEREÇO DO INSTAGRAM" id="Instagram1" target="_blank" title="Instagram"></a></li>
<li><a href="ENDEREÇO DO YOU TUBE" id="youtube1" target="_blank" title="You Tube"></a></li>
</ul>
</div>
***Para centralizar use: margin:left ou margin:right.
      Em negrito : coloque o endereço do seu perfil
      Se quiser mudar as imagens: faça as modificações nas partes que estão de             vermelho

Nenhum comentário:

Postar um comentário