Box flutuante de redes sociais.

Adicionando O Botão Curtir, Seguir & +1 Em Todas As Páginas! (3.2.x) (3.1.x)

Introdução: Devido ao grande número de pedidos dos usuários do GGames em saber como eu fiz isto, irei criar um tutorial para vocês, solicito que no mínimo reputem meu tópico, curtam nossa página no Facebook e também aperte em +1 para ajudar a divulgar o Fórum.

A vantagem quanto aos outros métodos, é que fica quase impossível o usuário não ver isso!

Resultado Final:

[Only registered and activated users can see links. Click Here To Register...]

Pré Requisitos
- CSS
- XHTML
- Página Facebook
- Twitter
- Página no Google Plus

Criando os Botões

Criando o botão do Twitter
Acesse este endereço: [Only registered and activated users can see links. Click Here To Register...]
Faça exatamente igual a print abaixo

[Only registered and activated users can see links. Click Here To Register...]

Copie o código e salve em um bloco de notas
Criando o botão do Facebook
Acesse este endereço: [Only registered and activated users can see links. Click Here To Register...]
Faça exatamente igual a print abaixo.

[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]

Criando o botão do Google+
Acesse este endereço: [Only registered and activated users can see links. Click Here To Register...]
Faça exatamente igual a print abaixo.

[Only registered and activated users can see links. Click Here To Register...]

Copie o código e salve em um bloco de notas

Agora que temos todos os códigos de cada botão, agora vamos adicionar eles na skin!

Tutorial:

Vamos poupar tempo, abra seu Admincp -> Look & Feel -> Sua Skin e já deixe aberto.
Na aba CSS, abra ipb_styles.css, no final de tudo, insira o seguinte código.

Código:

---

#sosinvisionsocial{                position:fixed;                top:42%;                right:0;                width:55px;                height:235px;                background:#E7E7E7;                border-top:0;                border-left:0;                border-right:0;                border-bottom:0;                border-radius:3px 0 0 3px;                -webkit-border-radius:3px 0 0 4px;                -moz-border-radius:3px 0 0 3px;                box-shadow:0 0 3px 3px #858585;                -moz-box-shadow:0 0 3px 3px #858585;                -webkit-box-shadow:0 0 3px 3px #858585;                margin:0;                padding:10px;}#sosinvisionsocial p{                background:transparent;                margin:0;                padding-top:5;                padding-botton:5;                font-size:0;                line-height:0;}

---

Após fazer isso, clique em SAVE.

Agora na aba TEMPLATE, vá em globalTemplate, no final do código, antes dê;

Código:

---

        </body></html>

---

Insira o Seguinte Código;

Código:

---

<!-- Inicio Redes Social | SOS Invision --><div id="sosinvisionsocial">                <center>                                <p><img src="SUA LOGO (DIMENÇÃO INDICADA 58x58)"></p>                                                                                <p>CÓDIGO Facebook        </p>                                <p>CÓDIGO GOOGLE+</p>                                                                                <p>Código Twitter</p>                </center></div><!-- FIM Redes Social | SOS Invision -->
Feito isso, não se esqueça de colocar os códigos salvos das redes, entre as tags <p>.

---

Aonde está o link da imagem, vocês podem substituir pelo logo do seu fórum ou remover!

É isso, espero que vocês gostem de resultado final, qualquer dúvida só perguntar!

Texto, Imagem & Código fonte são de minha autoria.

Créditos: saulosouza14