• Tweet
• Email

• Tweet
• Email

Já alguma vez se questionou como fazer uma Caixa Flutuante Para as Redes Sociais no seu website? Existem várias disponíveis pela internet fora, no entanto, quantidade não é qualidade, e a maioria delas deixa muito a desejar. Além disso, a personalização não é tão fácil quanto se poderia desejar, e você não é obrigado a ficar com a criação de outra pessoa qualquer, quando pode criar você mesmo a sua própria caixa flutuante, ao seu gosto. Para o ajudar a criar uma dessas caixas, trazemos-lhe hoje um artigo que lhe vai demonstrar Como Adicionar uma Caixa Flutuante ao Seu Website Para as Redes Sociais!

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! Obrigado aos colegas Web And Designers!

GOSTARIA DE ACRESCENTAR ALGO?

A Escola Criatividade está aberta à participação dos seus leitores nos artigos. Se acha que tem algo que seria interessante e que iria trazer valor ao artigo, não perca mais tempo, comente e tome a sua posição!

Abraço