[TUTORIAL] Redes sociais flutuantes

por Dury 19.08.11 1:25

Botões de redes sociais flutuantes

É possível adicionar ao widget um pequeno código, ao qual será possível ver os botões "Facebook Connect, +1 e Twitter". Neste tutorial vamos fazê-los flutuar no fórum de maneira prática, e só modificando pequenos valores.

--> Tutoriais, dicas e astúcias <--
Botões de rede sociais flutuantes

1º - Adicionar e modificar o CSS:
Esse código CSS pode ser aplicado tanto na folha de estilo CSS do fórum, como também em um widget, mensagem da home page, páginas HTML ou Javascripts se você desejar, mas é claro que há diferença entre os locais. Vamos aplicar de preferencia esse código na folha CSS.

Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS ->>

(clique na imagem para aumentar)

[TUTORIAL] Redes sociais flutuantes Css11

[TUTORIAL] Redes sociais flutuantes 110111

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.

[TUTORIAL] Redes sociais flutuantes 110210

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).

[TUTORIAL] Redes sociais flutuantes 110310

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.

[TUTORIAL] Redes sociais flutuantes 110410

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.

Vamos adicionar o seguinte código:

/* 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;}

Azul: Altura dos botões de rede sociais.
Vermelho: Possibilita escolher o lado em que se posicione os botões, esquerdo ou direito. Lembre-se que, é possível adicionar valores negativos. Como no código CSS acima, o valor destacado em vermlho tem o valor negativo, sendo assim o quando mais o número for aumentado mais ele se posicionará na página.

2º - Adicionar código no widget:

Painel de controle ->> Módulos ->> Portal e Widgets ->> Gestão dos widgets do fórum ->>
Clique no botão "Criar um widget personalizado".

[TUTORIAL] Redes sociais flutuantes Wf310

No campo "Fonte do widget" vamos adicionar o seguinte código:

<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&href=ENDEREÇO_DO_FORUM%2F&send=false&layout=box_count&width=60&show_faces=false&action=like&colorscheme=light&font&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&count=vertical&id=twitter_tweet_button_0&lang=en&original_referer=ENDEREÇO_DO_FORUM%2F&text=TÍTULO_DA_PAGINA&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&ENDEREÇO_DO_FORUM%2F&send=false&layout=box_count&width=60&show_faces=false&action=like&colorscheme=light&font&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>

Logo quando adicionar, clique em Salvar.

Vamos arrastar o novo widget para coluna onde estão os outros widgtes do fórum. Para isso, segure com botão direito do mouse e leve-o até onde deseja.

[TUTORIAL] Redes sociais flutuantes Untitl10

Logo depois, salve as configurações da mudança e veja o resultado na página inicial do fórum.

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

[TUTORIAL] Redes sociais flutuantes Act_bottom

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