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!
12 Comentários
Parabéns pelo tutorial...
27 de dezembro de 2011 às 15:42já adicionei no meu blog, fiz apenas algumas modificações...
Mais ficou show!
Que bom Claudio, obrigado pelo elogio!
31 de dezembro de 2011 às 11:21OI, 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:03Olá Rosberg, para aproxima-los você deve usar as propriedades margin-left ou margin-right. Espero ter ajudado.
22 de fevereiro de 2012 às 19:17Abraços.
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:47Muito Obrigado Daniel.
9 de março de 2012 às 12:09muito boa a dica
27 de março de 2012 às 19:47Olá! 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:35Olá 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!
17 de abril de 2012 às 12:00Abraços Amigo, Fica com Deus!
E recomendo que use-o! :D Até mais ..
Boa explicação, simples e objetiva.
3 de agosto de 2013 às 19:49Depois de uma peregrinação na web achei aqui um gadget que funciona e melhor sem erro.
Olá Maurício! Que bom que gostou da explicação.
3 de agosto de 2013 às 20:02Haha.. Volte Sempre :D
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:17Postar 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!