http://www.elainegaspareto.com/2016/08/menu-de-redes-sociais-com-efeito-hover.html
http://fontawesome.io/
Abaixo de <head> coloque esse script:
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css?ver=3.9.2' id='font-awesome-css' media='all' rel='stylesheet' type='text/css'/>
Depois va em modelo... adicionar gadget... e coloque o codigo abaixo:
<center>
<ul class="redessociais">
<a href="LINK DO PERFIL" title="Facebook"><li class="icone"><i class="fa fa-facebook" style="color:#fff"></i></li></a>
<a href="LINK DO PERFIL" title="Google+"><li class="icone"><i class="fa fa-google-plus" style="color:#fff"></i></li></a>
<a href="LINK DO PERFIL" title="Pinterest"><li class="icone"><i class="fa fa-pinterest" style="color:#fff"></i></li></a>
<a href="LINK DO PERFIL" title="Instagram"><li class="icone"><i class="fa fa-instagram" style="color:#fff"></i></li></a>
</ul>
</center>
<style>
li.icone{width: 38px; height: 38px; line-height: 38px; background: #E8657B; text-align: center; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); margin: 8px 4px 0 auto; font-size: 26px; font-weight: normal;}
li.icone:hover{background: #000;}
ul.redessociais{margin-top: 5px; margin-left:-2px; padding: 0; list-style: none;}
ul.redessociais li{display: inline-block; padding: 4px;margin-left: 1px;margin-right: 3px;}
</style>
<center>
<ul class="redessociais">
<a href="LINK DO PERFIL" title="Facebook"><li class="icone"><i class="fa fa-facebook" style="color:#fff"></i></li></a>
<a href="LINK DO PERFIL" title="Twitter"><li class="icone"><i class="fa fa-twitter" style="color:#fff"></i></li></a>
<a href="LINK DO PERFIL" title="Skoob"><li class="icone"><i class="fa fa-bookmark-o" style="color:#fff"></i></li></a>
<a href="LINK DO PERFIL" title="Youtube"><li class="icone"><i class="fa fa-youtube-play" style="color:#fff"></i></li></a>
<a href="LINK DO PERFIL" title="Instagram"><li class="icone"><i class="fa fa-instagram" style="color:#fff"></i></li></a>
<a href="LINK DO PERFIL" title="Contato"><li class="icone"><i class="fa fa-envelope-o" style="color:#fff"></i></li></a>
</ul>
</center>
<style>
li.icone{width: 24px; height: 24px; line-height: 24px; background: #ffc63d; text-align: center; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); margin: 8px 4px 0 auto; font-size: 20px; font-weight: normal; -webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda **/}
li.icone:hover{background: #777777;}
ul.redessociais{margin-top: 5px; margin-left:-10px; padding: 0; list-style: none;}
ul.redessociais li{display: inline-block; padding: 4px;margin-left: 1px;margin-right: 3px;}
</style>
________________________________________________________________
<center>
<ul class="redessociais">
<a href="https://www.facebook.com/DicasdeLivros" title="Facebook"><li class="icone"><i class="fa fa-facebook" style="color:#fff"></i></li></a>
<a href="https://twitter.com/dlivros" title="Twitter"><li class="icone"><i class="fa fa-twitter" style="color:#fff"></i></li></a>
<a href="https://www.skoob.com.br/usuario/24546" title="Skoob"><li class="icone"><i class="fa fa-bookmark-o" style="color:#fff"></i></li></a>
<a href="https://www.youtube.com/user/elinharegis/videos?view_as=public" title="Youtube"><li class="icone"><i class="fa fa-youtube-play" style="color:#fff"></i></li></a>
<a href="https://www.instagram.com/d.livros/" title="Instagram"><li class="icone"><i class="fa fa-instagram" style="color:#fff"></i></li></a>
<a href="http://dlivros.blogspot.com.br/p/contato.html?zx=f4d661dd97576374" title="Contato"><li class="icone"><i class="fa fa-envelope-o" style="color:#fff"></i></li></a>
</ul>
</center>
<style>
li.icone{width: 24px; height: 24px; line-height: 24px; background: #ffc63d; text-align: center; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); margin: 8px 4px 0 auto; font-size: 20px; font-weight: normal; -webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda **/}
li.icone:hover{background: #777777;}
ul.redessociais{margin-top: 5px; margin-left:-10px; padding: 0; list-style: none;}
ul.redessociais li{display: inline-block; padding: 4px;margin-left: 1px;margin-right: 3px;}
</style>
0 Comentários