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

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Zé da Silva
    28 de março de 2011

    Show !!! :)

    Estava querendo pôr isso no Clube há tempos !!! =)
    Muito obrigado !! :D



    • Diogo Espinha
      29 de março de 2011

      Olá Zé da Silva! Fico contente por você ir dar utilidade do nosso artigo!

      Abraço



  2. André Thiago
    28 de março de 2011

    Cara vlws… mão na roda este tuto!!



    • Diogo Espinha
      29 de março de 2011

      Olá André, obrigado pelo seu comentário! Espero que goste da Escola Criatividade :)

      Abraço



  3. Xavier Costa
    29 de março de 2011

    Diogo,

    Do melhor esse tutorial!!

    Abraço



    • Diogo Espinha
      29 de março de 2011

      Olá Xavier, obrigado pela visita e pelas tuas palavras!

      Grande abraço :)



  4. bdgiga
    8 de abril de 2011

    Obrigado pelo tutorial, mas fiquei sem perceber uma coisa no primeiro passo, você fala para criar uma página em html, mas depois qual o nome em que guardamos.

    Obrigado.



  5. Bruno Costa
    3 de junho de 2011

    show de bola!



  6. rafael
    22 de agosto de 2011

    Galera estou tentaod faser mais noa consigo por favor me ajudem ples



  7. Zama
    7 de setembro de 2011

    Olha só, estou sacudindo a web atrás de tutoriais a respeito do assunto, mas para site em específico existem poucos ou quase nada. Os exemplos são mais para blogs o que dificulta o entendimento dos códigos sugeridos. Também pra quem não é expert no assunto se perde muito nas explicações, como de costume vejo por aí. Ajudaria muito se o tutorial tivesse esta conotação e com isto ficasse mais claro principalmente pra quem não manja do assunto. É apenas uma critica construtiva e não tira o brilho da sua explanação Diogo. Grande abraço



  8. Carlos Eduardo
    23 de novembro de 2011

    Muito bom esse seu post,
    mais surgiu uma dúvida;

    caso queira que essa div (redes sociais) fique sempre com 50% da página como devo proceder?

    usei
    margin-top:50% ou auto;
    margin-bottom:50% ou auto e não deu funcionou;

    Já na minha div geral ou wrappe como vc mencionou uso o seguinte,

    .geral{
    margin-left:auto;
    margin-reight:auto} e nesse caso funciona minha div geral fica no centro da página,

    vc poderia me ajudar?
    Grato!



  9. Arthur
    3 de abril de 2012

    Num entendi foi nada…



  10. Manuel
    15 de novembro de 2012

    Não consegui montar o script , poderia esplicar com mais detalhes,

    muito obrigado desde ja´.



  11. Manuel
    15 de novembro de 2012

    Amigos pus o function na tag head mas no browser ele aparece no topo…. poderiam me ajudar??
    grato



  12. Raphael
    4 de fevereiro de 2013

    Olá amigo, gostei muito do post, futuramente estarei testando em meu site, gostei realmente, era isso que eu estava proucurando.

    Obrigado, parabéns pelo blog!
    http://www.letrasnet.com.br

    Raphael Garcia Cleto.



  13. Luiz
    5 de dezembro de 2013

    Queria colocar essa rede social do seu site, que esta ao lado esquerdo do seu site, tem maneira de enviar esse código html. Obrigado.



    • kiko
      7 de janeiro de 2014

      Este amigo que crio este post deve pensar que toda gente tem o conhecimento dele da maneira como explica as coisas 90% n vao perceber nada.. n serves mesmo para prof. desculpa la mas é a realidade amigo…



  14. romoaldo
    26 de março de 2014

    e para colocar um x e fechar a caixa é possivel../a resposta,



  15. Vinicius Luna
    14 de abril de 2014

    Bom dia Diego

    Gostei muito do artigo e também assisti ao vídeo sobre manter-se criativo a longo prazo. Gostaria de iniciar um negócio rentável na internet, mas quando pesquiso, fico meio perdido porque não há uma clareza sobre o assunto. Como captar e fidelizar clientes e coisas do gênero, se puder, prepara um vídeo que possa direcionar pessoas iniciantes.
    vlw obrigado.



  16. DeCarvalho
    29 de julho de 2015

    Ótimo conteúdo

    Gostaria de saber se você tem, ou poderia ensinar, como faz para colocar widget flutuante (desses que tem para blog/wordpress) do facebook na barra lateral, onde a pessoa passa o mouse e o widget expande mostrando informações da fanpage e afins.. A internet está cheia de sites com tutoriais de como implementar, mas nenhum para sites em php.. são todos para blogger e wordpress..

    Grato


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz