Caixa flutuante de Redes Sociais para o seu site

Vamos aprender como colocar uma caixa de redes sociais como a da imagem do lado que irá dar um toque a mais no seu site de criatividade. Mais cuidado, tem muita gente que não gosta!

1. COMEÇANDO

Primeiramente teremos de criar uma página HTML e adicionar alguns div devidamente identificados relativamente à estrutura da página.

  <div id="wrapper">

            <div id="page-wrap">

                    <div id="content">

                        <div id="main">

                        </div>

                        <div id="sidebar">

                        </div>

                    </div>

                    <!-- O Conteúdo acaba aqui -->

            </div>

            <!-- O page-wrap acaba aqui -->

</div>

2. SEGUNDO PASSO

Adicione uma div abaixo da div page-wrap com os seus botões das redes sociais, como o Facebook, Twitter, entre outros.

<div id="floating-box">

                <div id="box">

                    <!-- Aqui insere o código dos botões -->

                </div>

              </div>

3. INTRODUZIR DADOS

É necessário para questões de teste, ter algum conteúdo. Se está a introduzir a caixa flutuante num site existente com conteúdo, salte este passo. Se não, vá aqui e copie algum texto e insira nas div main e sidebar.




4. INTRODUZIR A MAGIA

Para que a magia aconteça, é necessário introduzir algum código jQuery na tag head.

$(function() {
     var offset = $("#box").offset();
     var topPadding = 15;
     $(window).scroll(function() {
         if ($(window).scrollTop() > offset.top) {
             $("#box").stop().animate({
              marginTop: $(window).scrollTop() - offset.top + topPadding
             });
         } else {
             $("#box").stop().animate({
                 marginTop: 0
             });
         };
     });
 });

5. ESTILIZAR

A página e a caixa flutuante necessitam agora de alguma estilização com CSS. Você poderá dar asas à sua imaginação e criar de acordo com o seu gosto, no entanto deixamos uma sugestão valiosa.

  <style type="text/css">

  * { margin: 0; padding: 0; }

  body { font: 14px/1.4 Verdana, Arial, sans-serif; font-weight: normal;background-color: #f2f2f2;float: left;width: 100%; color: #333333;

}

  #wrapper{width: 800px;margin: 0 auto;padding: 0px;}

  #content{float: left;width: 100%;border: 1px solid #B5076D;background-color: #FFFFFF;font-size: 12px;line-height: 20px;}

  #page-wrap {  position: relative;float: left; margin: 50px 0;}

  h1{font-size: 1.6em;color: #B5076D; font-style: italic;padding: 20px;}

  p { margin: 0 0 10px 0; }

  #main { width: 460px; float: left; padding: 20px; background-color: #f1f1f1;border: 1px solid #DDDDDD; margin: 20px;display: inline;}

  #sidebar { width: 215px; float: right;border: 1px solid #DDDDDD; background-color: #f1f1f1;margin: 20px; display: inline;}

  #sidebar ul{padding: 10px;}

  #sidebar ul li{font-size: 0.9em;margin: 0 0 0 20px;}

  </style>

Além do código acima, introduza este código CSS para embelezar um pouco a caixa

  #box{position: absolute;left: -70px;border: 1px solid #B5076D;

 border-right: 0px;padding: 10px;background-color: #FFF;}

  #box div{margin: 10px 0;}

E já está. Uma caixa flutuante para as redes sociais em 5 minutos!