Botões de redes sociais flutuantes

(clique na imagem para aumentar)

Ver o CSS da base do seu fórum - Permite o administrador conferir o estilo padrão do CSS do fórum. Mesmo se você tiver aplicado algum código CSS na folha de estilo, esse CSS base não será alterado. Ele mostra os códigos que personalizam seu fórum sem a necessidade do CSS adicional, que no caso serial a da folha de estilo.

Procurar CSS - Com essa ferramenta, podemos fazer uma busca nos códigos existentes na folha de estilo CSS. Por exemplo, se você adicionou algum código na folha de estilo, e pelo fato dela ser muito grande você não estiver encontrando o código desejado, a partir do momento em que digitar o código no campo "Procurar CSS", o código será encontrado (se digitado corretamente).

Desativar o CSS de base - Caso desabilite essa opção, o CSS base do seu fórum será desativado, deixando apenas o CSS da folha de estilo.

Melhorar seu CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.

/* CSS das redes sociais flutuantes */
#pageshare
{position:fixed; bottom:87%; margin-left:-35px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

<div id='pageshare'><div class='sbutton' id='fb'>
<a name="ttw_share" type="box_count" <iframe src="https://www.facebook.com/plugins/like.php?locale=pt_BR&amp;href=ENDEREÇO_DO_FORUM%2F&amp;send=false&amp;layout=box_count&amp;width=60&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=60" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:60px;" allowtransparency="true"></iframe>

<iframe src="http://platform0.twitter.com/widgets/tweet_button.html?_=1311006182541&amp;count=vertical&amp;id=twitter_tweet_button_0&amp;lang=en&amp;original_referer=ENDEREÇO_DO_FORUM%2F&amp;text=TÍTULO_DA_PAGINA&amp;url=ENDEREÇO_DO_FORUM%2F" allowtransparency="true" frameborder="0" scrolling="no" class="twitter-share-button twitter-count-vertical" style="width: 55px; height: 62px; " title="Twitter For Websites: Tweet Button"></iframe>


<iframe src="https://www.facebook.com/plugins/like.php?locale=pt_BR&amp;ENDEREÇO_DO_FORUM%2F&amp;send=false&amp;layout=box_count&amp;width=60&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=60" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:60px;" allowtransparency="true"></iframe>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script><g:plusone size="tall"></g:plusone>
</a></div></div>

• O que seria os valores negativos no CSS?
  Diariamente em nossa vida, presenciamos contas de adição e subtração, nos códigos isso não é diferente. Para atrivuir-mos uma posição neste CSS, é necessário dar um valor númerico e isso pode levar a ferranenta que estamos montando para um local ou para outro. No caso do CSS apresentado acima, está com o valor negativo, pois assim o código vai reconhecer até aonde queremos que os botões sejam posicionados. Quando negativos, eles são movidos para o direita, e quando positivos são movidos para esquerda, isto é, quando atribuido o valor "position".
  
  
• Como é que CSS reconheceu o código que adicionei?
  Em um formulário de postagens existe os campos de nome. Ou seja, "name=Z", isso quer dizer que o nome do código será "Z", logo se colocar-mos um CSS chamando o valor "Z" ele será modificado. No nosso do widget temos o código "<div id='pageshare'>" que determina o valor do CSS. No CSS temos o "#pageshare", quando existe algum código no fórum com o nome do ID de "pageshare" ele será modificado pelo CSS que aplicamos.
  
  
• Onde posso ver o resultado?
  
  
  
  
• Existe um vídeo tutorial?
  
  
  
  Melhor visualização no site do Youtube: https://youtu.be/Keb6dlnMsAA

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Botões de rede sociais flutuantes