Widget redes sociais aparecem com mouseover

Widget redes sociais aparecem com mouseover

Este artigo foi construído a pedidos do nosso leitor Bruno, ele olhou nossa postagem de Efeito Mouseover ao passar mouse sobre imagem e nos deu a idéia de um widget de redes sociais onde os ícones fiquem fixos e ao passar o mouse por cima da imagem, ela deslizar para os lados, cima ou baixo.
Bom, este artigo irá mostrar de forma simplificada como fazer ste widget que não é nada complicado, apenas trabalhoso.

1º Passo: Adicionar o código CSS

Vá em seu blog e acesse o painel dele, vá em DESIGN->EDITAR HTML e procure por este código abaixo:
]]></b:skin>

E após encontrar o código cole logo ACIMA dele o código CSS abaixo:

div.sexy-bookmarks {
height:30px;
position:relative;
width:200px; }
div.sexy-bookmarks span.sexy-rightside { width:0px; height:54px;
background: url(LINK-DA-IMAGEM) no-repeat right bottom; position:absolute; right:-17px; }
div.sexy-bookmarks ul.socials {
margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:20px; }
div.sexy-bookmarks ul.socials li {
display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:45px !important; cursor:pointer !important; padding:0 !important; }
div.sexy-bookmarks ul.socials a {
display:block !important; width:45px !important; height:29px !important; font-size:0 !important; color:#000 !important; }
.sexy-delicious, .sexy-delicious:hover,.sexy-twitter, .sexy-twitter:hover,.sexy-facebook, .sexy-facebook:hover,.sexy-email, .sexy-email:hover { background: url(LINK-DA-IMAGEM) no-repeat !important; }

.sexy-delicious { background-position:left top !important; }
.sexy-delicious:hover { background-position:left bottom !important; }
.sexy-twitter { background-position:-50px top !important; }
.sexy-twitter:hover { background-position:-50px bottom !important; }
.sexy-facebook { background-position:-100px top !important; }
.sexy-facebook:hover { background-position:-100px bottom !important; }
.sexy-email { background-position:-146px top !important; }
.sexy-email:hover { background-position:-146px bottom !important; }

Vamos personalizar:
LINK-DA-IMAGEM:Aqui você deverá colocar o link para a sua imagem SPRITE como a imagem abaixo, ela deverá ser parecida com a imagem abaixo.


2º Passo: adicionar o HTML

Após inserir este código CSS bastará voce ir no seu blog novamente em DESIGN e inserir um novo widget do tipo html, e colar o seguinte código dentro:

  <div class='sexy-link'>
  <div class='sexy-bookmarks'>
    <ul class='socials'>
      <li class='sexy-delicious'><a href='LINK-DO-SEU-FEED' rel='nofollow' target='_blank' title='Enviar no Delicious'></a></li>
      <li class='sexy-twitter'><a href='LINK-DO-SEU-TWITTER' target='_blank' title='Compartilhe no Twitter'></a></li>
      <li class='sexy-facebook'><a href='LINK-DO-SEU-FACEBOOK' rel='nofollow' target='_blank' title='Compartilhe no Facebook'></a></li>
      <li class='sexy-email'><a href='SEU-E-MAIL' rel='nofollow' target='_blank' title='Compartilhe por Email'></a></li>
    </ul>
    <span class='sexy-rightside'></span>
   </div>
</div>

Basta subistituir os links acima como sugerido e pronto, seu widget estará funcionando.

Lembrando que este código pode ser usado em qualquer lugar de seu blog tanto em uma coluna, quanto em uma postagem.
VEJA ABAIXO EM FUNCIONAMENTO:
Obs.: Caso queira este widget fixo na tela e não parado em uma coluna, veja o seguinte tutorial:

Imagem para subir ao topo do blog

e adeque a este. Em caso de dúvidas não deixe de comentar. Caso queira sugerir um artigo também não deixe de comentar, você poderá ganhar um link assim como o Bruno neste artigo.