Box Flutuante de Redes Sociais ao Lado das Postagens

► +A +/- -A


Olá pessoal, hoje venho trazendo um tutorial bem legal, se você leitor já percebeu que ao lado das minhas postagens há um box de redes sociais, então ensinarei a você como colocar ele, Como vocês viram na imagem de demonstração o Código está ligado o Twitter, Google e Facebook, e possui um efeito que quando descemos a post até o final ele desce com um efeito chamado jquery.
Ele foi criado pelo blog inglês Web and Designers.


Mãos ao tutorial:
1. Faça o login no blogger, vá até o painel do blog e clique em editar HTML
2. E ainda em Editar modelo clique em "Expandir  Modelos Widgets"
3. Agora pressione as teclas CTRL + F (atalho de busca na página) e procure pela seguinte Tag:


]]></b:skin>


4. E ACIMA dele cole o seguinte código:




#box{border:1px solid #ccc; padding:5px; background:#fff; z-index:9999; display:block; position:absolute; top:300px; float:left; margin:0 0 0 -100px; text-align:center;}#box div{margin: 10px 0;}




5. Agora procure pela seguinte tag:


<div class='post-footer-line post-footer-line-3'>


Atenção: Dependendo do seu template você não encontrara o código acima (<div class='post-footer-line post-footer-line-3'>). Caso Você não ache o código citado você deverá procurar o seguinte código: <div class='post-footer-line post-footer-line-3'/>


6. E ABAIXO dele adicione o seguinte código:




<b:if cond='data:blog.pageType == "item"'>
<div id='floating-box'><div id='box'>
<div><a class='twitter-share-button' data-count='vertical' data-via='bcf_oficial' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a></div>
<div><g:plusone size='tall'/></div>
<div><fb:like expr:href='data:post.url' font='arial' layout='box_count' send='true' show_faces='false' width='54'/></div>
</div>
</div>
</b:if>




7. Agora procure pelo seguinte código:


</head>




6. E ABAIXO dele cole o seguinte código:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
     var offset = $("#box").offset();
     var topPadding = 210;
     $(window).scroll(function() {
         if ($(window).scrollTop() > offset.top) {
             $("#box").stop().animate({
                 marginTop: $(window).scrollTop() - offset.top + topPadding
             });
         } else {
             $("#box").stop().animate({
                 marginTop: 0
             });
         };
     });
 });
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'pt-BR'}
</script>
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/> 


Não Entendeu? Então não deixe de comentar, Seu comentário e Bem Vindo!
► Postagens Relacionadas:

12 Comentários

Claudio Luiz disse...

Parabéns pelo tutorial...
já adicionei no meu blog, fiz apenas algumas modificações...
Mais ficou show!

27 de dezembro de 2011 às 15:42
Caio Vinicius disse...

Que bom Claudio, obrigado pelo elogio!

31 de dezembro de 2011 às 11:21
Rosberg Guedes disse...

OI, estou com uma duvida, como aproximo a imagem do box da pagina do blogger? Eu adicionei e ele ficou um pouco distante da margem.

22 de fevereiro de 2012 às 17:03
Caio Vinicius disse...

Olá Rosberg, para aproxima-los você deve usar as propriedades margin-left ou margin-right. Espero ter ajudado.
Abraços.

22 de fevereiro de 2012 às 19:17
Daniel disse...

Talvez, Caio, ele não esteja salvando depois de cada passo, isso facilita muito o sucesso do que lhe é oferecido nesse seu tutorial... :D

9 de março de 2012 às 08:47
Caio Vinicius disse...

Muito Obrigado Daniel.

9 de março de 2012 às 12:09
games para celular disse...

muito boa a dica

27 de março de 2012 às 19:47
Eduardo disse...

Olá! Notei que você não está usando o box flutuante. Estou pensando em colocar, será que vale a pena, será que o blog não fica muito poluído, muito apelativo?

17 de abril de 2012 às 00:35
Caio Vinicius disse...

Olá Eduardo, Amigo, Não se preocupe, sim sim, não estou usando, mas usa-vá ele, parei de usar pois mudei de template, e acho que não combina muito com o meu layout não! E vi perfeitamente que no seu Blog combina muito mesmo, e ouça, ele vale muito a pena, o blog de jeito nenhum ficará de forma alguma poluído ele é muito leve e não afeta no carregamento das páginas!
Abraços Amigo, Fica com Deus!
E recomendo que use-o! :D Até mais ..

17 de abril de 2012 às 12:00
Maurício Silva disse...

Boa explicação, simples e objetiva.
Depois de uma peregrinação na web achei aqui um gadget que funciona e melhor sem erro.

3 de agosto de 2013 às 19:49
Caio Vinicius disse...

Olá Maurício! Que bom que gostou da explicação.
Haha.. Volte Sempre :D

3 de agosto de 2013 às 20:02
Paulista disse...

Caio, gostaria de saber se é possível fixar a box paradinha no meio da tela! tentei adicionar o comando fixed mas continua se movendo! e obrigado pela excelente postagem.

14 de junho de 2014 às 20:17

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!