Botões de Compartilhamento Flutuante

Hoje eu postarei um gadget de botões de compartilhamento flutuante par seu blog ou site muito interessante, pois nada melhor do que compartilhamento de suas postagens nas maiores redes socias. Assim atraindo mais visitas para seu blog/site, vamos ao código para adicionar ao seu blog basta ir em layout e adicionar um HTML/JavaScript e copiar e colar o código abaixo.

<!-- Dicas Gadgets --> <style type='text/css'> .dvin{ border-style:solid; border-width: 2px; border-color:#CCC; padding-top:10px; padding-bottom:18px; padding-right:3px; padding-left:3px; border-radius: 7px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .plus { text-align: center; margin-top: 5px; margin-left: 1px; } .tweet { text-align: center; margin-top: 3px; } .face { text-align: center; margin-top: 4px; } </style> <div style='position: fixed; top: 40%; left: 40px'> <div class='dvin'> <!-- Tweet --> <div class='tweet'> <a class='twitter-share-button' data-count='vertical' data-via='elbatist' href='http://twitter.com/share' rel='nofollow'>Tweet</a> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script> </div> <!-- Google +1 --> <div class='plus'> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'>{lang: 'pt-BR'};}</script> <g:plusone size='tall'/> </g:plusone> </div> <!-- Facebook --> <div class='face'> <a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script> </div> </div> </div>

Para trocar de lado e mudar para direita basta procurar esta parte do código e trocar left por right

<div style='position: fixed; top: 40%; left: 40px'>

Pra mudar a cor da borda basta procura esta parte no código e trocar a cor destacada em vermelho pela de sua escolha

border-color:#CCC;

Para alterar o tamanho da borda  mude o valor nesta pate do código

border-width: 2px;

Para mudar a distância lateral e a do topo basta mudar o valor nesta parte do código

<div style='position: fixed; top: 40%; left: 40px'>

Nessa Parte do código abaixo onde esta via='elbatist' você troca pelo seu usuário do twitter

count='vertical' data-via='elbatist'

Pronto seus Botões de Compartilhamento Flutuante esta pronto. Até a próxima Postagem.