Conectar-se

Esqueci minha senha

Os membros mais ativos do mês

Quem está conectado
2 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 2 Visitantes

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 19 em Ter Jan 03, 2012 9:38 am
Últimos assuntos
» Equipe Web ASA Fórum
Dom Jun 24, 2012 11:15 am por Alisson Silva

» [Re-Apresentação] Fábio
Sex Maio 25, 2012 4:45 pm por Fábio

» PixelZIP ~ design&programção em só lugar
Sex Maio 25, 2012 4:44 pm por Fábio

» Pedido de logo
Dom Maio 20, 2012 10:06 am por Alisson Silva

» Kernel - Apresentação
Sab Maio 19, 2012 9:49 am por Alisson Silva

» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sab Maio 19, 2012 9:48 am por Alisson Silva

»  HEBBO HOTEL 24 HORAS ONLINE !!
Sex Maio 04, 2012 7:20 pm por Alisson Silva

» Pedido de Layout
Sex Maio 04, 2012 5:23 pm por Fonsecca

» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry

» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry


[TUTORIAL] Redes sociais flutuantes

Ir em baixo

[TUTORIAL] Redes sociais flutuantes

Mensagem por Fry em Sex Dez 30, 2011 7:45 am

[Você precisa estar registrado e conectado para ver esta imagem.] 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


- 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)
[Você precisa estar registrado e conectado para ver este link.][Você precisa estar registrado e conectado para ver este link.] [Você precisa estar registrado e conectado para ver este link.]
[Você precisa estar registrado e conectado para ver esta imagem.]

[Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.] 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.
[Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.] 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).
[Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.] 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.
[Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.] 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.


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

[Você precisa estar registrado e conectado para ver este link.][Você precisa estar registrado e conectado para ver este link.] [Você precisa estar registrado e conectado para ver este link.]
[Você precisa estar registrado e conectado para ver esta imagem.]


No campo "Fonte do widget" vamos adicionar o seguinte código:
Código: [Você precisa estar registrado e conectado para ver este link.]
<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=http%3A%2F%2Fmovie.forumeiros.com%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=http%3A%2F%2Fmovie.forumeiros.com%2F&amp;text=F%C3%B3rum%20gratis%3A%20movie%20m%C3%BAtua%20para%20usu%C3%A1rios%20forumeiros%20-%20Portal&amp;url=http%3A%2F%2Fmovie.forumeiros.com%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;href=http%3A%2F%2Fmovie.forumeiros.com%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">
  {lang: 'pt-BR'}
</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.

[Você precisa estar registrado e conectado para ver este link.][Você precisa estar registrado e conectado para ver este link.] [Você precisa estar registrado e conectado para ver este link.]
[Você precisa estar registrado e conectado para ver esta imagem.]


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?

    [Você precisa estar registrado e conectado para ver este link.][Você precisa estar registrado e conectado para ver este link.] [Você precisa estar registrado e conectado para ver este link.]
    [Você precisa estar registrado e conectado para ver esta imagem.]


  • Existe um vídeo tutorial?


    Melhor visualização no site do Youtube: [Você precisa estar registrado e conectado para ver este link.]





© Fórum dos Fóruns


[Você precisa estar registrado e conectado para ver esta imagem.] Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Botões de rede sociais flutuantes
avatar
Fry
Admintradores
Admintradores

Posts Posts : 175
Idade Idade : 19
Respeito Respeito : 0
Web Moedas Web Moedas : 415

http://Em breve...

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum