Dicas, truques, tutoriais, reviews, promoções e informação

quinta-feira, 31 de maio de 2012

Barra flutuante de Redes Sociais nos posts (Blogger)

A pedidos de alguns de nossos leitores que possuem blogs no serviço Blogger (Blogspot), neste tutorial vou ensinar a como instalar um gadget flutuante de compartilhamento dentro dos posts.

Fornecerei a opção para três gadgets diferentes. Os gadgets são similar a esses da figura abaixo, cujos movimentam-se juntos ao scroll da página. Eles oferecem os botões dos principais serviços da atualidade: Facebook (Curtir e Compartilhar), Twitter, Google+, LinkedIn e Pinterest.

Veja a imagem abaixo, escolha o que mais lhe agrada e siga as instruções de instalação dele no tutorial.

gadget flutuante redes sociais blogspot blogger

Gadget Flutuante com Contador no Blogger



1ª Parte - Backup

Primeiramente, efetue login em seu blog e faça um backup completo do seu template no caso de algo sair errado.

Vá em Modelo e depois clique em Fazer backup/Restaurar (na parte superior direita). Após isso, clique no botão Fazer download do modelo completo.

barra flutuante redes sociais 2012

barra de compartilhamento que move blogger


2ª Parte - Adicionando o Código

1. Agora, nesta mesma página, clique em Editar HTML > Prosseguir e marque a opção "Expandir modelos de widgets"

barra redes sociais que se move blogspot 2012

2. Dentro do template, pressione as teclas Ctrl + F do teclado e procure pelo seguinte código: <b:includable id='post' var='post'>. [CLIQUE AQUI para copiar]

colocar gadget redes sociais blogger

3. Exatamente ABAIXO (depois) do código pesquisado acima, cole TODO o código do modelo do gadget de sua preferência.

MODELO SIMPLES


 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-80px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fafafa;padding:0 0 2px 0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>

<div id='pageshare' title='Compartilhe com seus amigos'>
<div class='sbutton' id='gb'><script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/><fb:like font='' layout='box_count' show_faces='false'/></div>
<div class='sbutton' id='rt'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div class='sbutton' id='gplusone'><script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></div></div>
</b:if></b:if>

See the Pen yqFnI by matttttttttt (@marcelost) on CodePen



MODELO ADDTHIS


<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_button_linkedin_counter" li:counter="top"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
</b:if></b:if>

See the Pen cAfjm by Seu Tutorial (@marcelost) on CodePen



MODELO ST


<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-105px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fafafa;padding:0 0 2px 0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>

<div id='pageshare' title='Compartilhe com seus amigos'>
  <div class='sbutton' id='gb'><script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/><fb:like font='' layout='box_count' show_faces='false'/></div>
<div class='sbutton' id='rt'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div class='sbutton' id='pinit'><script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/><a data-pin-color='red' data-pin-do='buttonBookmark' data-pin-height='28' href='//www.pinterest.com/pin/create/button/'><img src='//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png'/></a></div>
<div class='sbutton' id='gplusone'><div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div>
<script type="text/javascript">
  window.___gcfg = {lang: 'pt-BR'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script></div>
<div class='sbutton' id='fbshare'><div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-share-button" data-width="48" data-type="box_count"></div></div>
</div>
</b:if></b:if>

See the Pen ngqaL by Seu Tutorial (@marcelost) on CodePen



Nota: O gadget não aparecerá na homepage do seu blog/site, apenas nos posts individuais. Se você quiser que ele apareça em qualquer parte do blog, basta remover as duas primeiras linhas e a última do código acima.

4. Visualize e veja se está tudo ok. Se estiver, salve a alteração e pronto.


3ª Parte - Personalizando

Você pode alterar o lado onde o gadget ficará (esquerdo ou direito), o background, borda e a distância entre o campo de postagem. Para isso, iremos modificar apenas as áreas equivalentes a estas partes no container.

  • Escolhendo o lado dos modelos simples e ST

Na quarta linha do código, repare nas partes destacadas em vermelho a seguir:

#pageshare {position:fixed; bottom:15%; margin-left:-80px; float:left;

Coloque 'right' para deixá-lo na direita.
Mantenha 'left' para fixá-lo à esquerda mesmo.

  • Escolhendo o lado do modelo AddThis

Altere a parte em vermelho abaixo no código colocando 'right' no lugar de 'left'.

left:50px;top:50px;


  • Alterando o fundo (background) e Borda

Na quarta linha do código mesmo, modifique o valor HTML do código destacado abaixo para definir a cor de fundo do gadget.

background-color:#fafafa;

Confira a tabela de cores HTML nesta página.

Nesta mesma linha, altere o nome em destaque da parte abaixo pelo código HTML da cor da borda que deseja.

border: 1px solid black;

Troque apenas o 'black' pelo código da cor.

  • Configurando a distância

Você pode colocar o gadget bem próximo ao post (padrão), dentro do post (não recomendável), colado na borda da tela ou em qualquer local que achar melhor.

No modelo simples, altere o valor -80px da parte "margin-left: -80px", em:

#pageshare {position:fixed; bottom:15%; margin-left:-80px;

Quando aumenta o valor, o gadget tende a ficar mais distante do post.
Quando diminui o valor, o gadget ficará cada vez mais próximo do post.

No modelo AddThis, altere o valor 50px da parte "left:50px;top:50px;".

Quando aumenta o valor, o gadget tende a ficar mais próximo do post.
Quando diminui o valor, o gadget ficará cada vez mais distante do post.

No modelo ST, altere o valor -105px da parte "margin-left: -105px".


Dúvidas ou problemas? É só comentar!

68 comentários:

  1. Obrigado Marcelo, no meu funcionou perfeitamente, show de bola. Agora só vou dar uma customizada nele pra deixar com a cara do meu blog hehe.
    Só uma dúvida, aquele botão de compartilhar do Facebook não tem como colocar? Eu usava um na minha sidebar e achava bem legal...

    Mais uma vez obrigado e parabéns pelo post. Sempre ajudando a quem solicita ajuda.
    Abraçuuu

    ResponderExcluir
  2. Natanael, estranho, acabei de acessar seu blog e encontrei o gadget lá!

    http://familiaunidacristo.blogspot.com.br/

    Basta abrir um post e o verá logo na parte esquerda flutuando.

    Abraços

    Juliano, valeu pelo comentário.
    Quanto ao botão "Compartilhar" tem como adicionar ao gadget sim, inclusive, estava adicionado. Porém, por causa de uma incompatibilidade com os códigos do botão "Curtir" ele não estava sendo exibido no Firefox e IE.

    Assim que eu corrigir a incompatibilidade insiro uma exceção deste botão no post, ok?

    Abraços

    ResponderExcluir
  3. Aiin q tudo, fiz no meu e funcionou direitinho.
    Ele até ja conta automaticamente os compartilhamentos q foram feitos e mostra no botão.
    Aaammeeeeeiii, o meu ta rosa hihihihi
    Bjão

    ResponderExcluir
  4. robson casa verde1 de junho de 2012 13:15

    Obrigado cara..funfou lindo aqui.
    T+

    ResponderExcluir
  5. Luan Galveia Blogspot11 de junho de 2012 15:03

    Cara Marcelo, esse gadget funfou 1000% em meus 3 blogs velho. Thank you very very very much.

    Abrasss

    ResponderExcluir
  6. Pararam de atualizar? Agora que descobri o site? Atualiza ai... seu trabalho é muito bom!

    ResponderExcluir
  7. Olá Erilson, agradeço sua visita e comentário. Fico muito feliz que esteja gostando do conteúdo do site.

    Com a correria do dia-a-dia às vezes o tempo aperta. Mas logo estarei publicando novos artigos.

    Abraços meu amigo

    ResponderExcluir
  8. Funfando magnificamente aqui brother.
    Muito obrigado meeeeesmo!

    ResponderExcluir
  9. Marcelo, fiz no meu blog e ficou perfeito camarada. Valeu mesmo.

    PS: se puder add o Pinterest na barra me avise =). Sera que tem como?
    Abração brow

    ResponderExcluir
  10. Lucas, você praticamente leu meu pensamento, rsrs. Eu já estou providenciando a adição do Pinterest e do botão Compartilhar do Facebook. Porém, quando soluciono um problema surge outro, então, aos poucos eu deixo certinho, divulgo e atualizo o artigo.

    Grande abraço

    ResponderExcluir
  11. Isso só funciona no blogger ou blogspot? No wordpress não dá certo?

    ResponderExcluir
  12. Olá Thamyres, o tutorial só se aplica ao Blogger mesmo.

    Abração

    ResponderExcluir
  13. AI SIM MAN VLW FICO DO GEITO QUE EU QUERIA.....VC PODERIA ME ENSINAR A COMO ADICIONA VISITANTES ONLINE NESSA BARRINHA OU COLOCA UMA DO LADO DIREITO SÓ COM O CONTADOR DE VISITANDES ONLINE POR FAVOR MAN E PROCUREI MUITO MAIS NÃO ACHEI AGRADEÇO DESDE JÁ ^^

    ResponderExcluir
  14. Parabéns. Coloquei no meu blog ( www.blogdoronilson.com ) e ficou ótimo.

    ResponderExcluir
  15. Parabens .... tbm coloquei isso no meu blog ( http://sucessoaoextremo.blogspot.com.br/ ) esta funcionando perfeitamente !

    ResponderExcluir
  16. Perfeito. Eu tava usando uma barra cedida pelo site Ferramentas Blog, mas não curtia ele porque a movimentação do gadget deles é muito ruim.
    Essa do site Seu Tutorial é beeeem melhor.
    Obrigado

    ResponderExcluir
  17. Muito obrigado Marcelo!
    Ficou perfeito. Deu outro visual ao Blog(poesiagalvaneana.blogspot.com)
    Um forte abraço!

    Emanuel Galvão

    ResponderExcluir
  18. Ola, parabens, o meu esta com problema no botão curtir, não funfa, mais os outros funcionando perfeitamente.

    ResponderExcluir
    Respostas
    1. Olá,

      Pode ser que esteja havendo uma incompatibilidade com os demais gadgets do Facebook que você possui em seu blog (como aquela barra superior ou a fan page, talvez).

      No entanto, em meu blog de testes eu uso vários gadgets também, mas a barra flutuante (incluindo o botão Curtir) funciona normalmente. Aliás, pode observar nos blogs dos amigos que comentaram antes. A barra está funcionando normalmente em todos.

      Excluir
  19. Adorei, muito bom, mas gostaria de saber uma coisa. como remover o gadget? É que eu esqueci de fazer o backup do modelo :(

    plz me ajuda

    ResponderExcluir
    Respostas
    1. Lucas, basta ir até os locais em que você adicionou os códigos e removê-los manualmente.

      Excluir
  20. Ótimo widget Marcelo. Funcionando perfeitamente em meu site =)
    Beijão
    Maria Luiza

    ResponderExcluir
  21. Já utilizei o código daqui e do ferramentas blog, mas com os dois um problema está ocorrendo: quando clica no curtir, a postagem não aparece na página de quem curtiu. O que será que pode estar acontecendo?

    Por favor, estou há dias tentando descobrir qual o problema do meu blog, pq as páginas curtidas não vão para o facebook. Se alguém souber me responder, agradeço mto!

    ResponderExcluir
    Respostas
    1. Acabei de testar aqui, e a publicação curtida foi postada no perfil do Facebook normalmente.

      Se isso está ocorrendo com ambos os gadgets, talvez não seja problema com os gadgets em si. Pois se fosse algo errado com eles, isso estaria acontecendo com todo mundo.

      Excluir
    2. Então, notei isso. É algum problema com meu blog. Mas não faço ideia do que pode ser.

      Atualmente implantei o sistema de comentários pelo blogger e facebook que vi no Dicas para Blogs. O único problema era com o JQuery, mas acho que resolvi. Agora não sei pq as postagens curtidas não aparecem de jeito nenhum no facebook.

      Se vc tiver alguma ideia, ou mais alguém...me informem, por favor. Estou precisando mto de arrumar isso o quanto antes.

      Excluir
    3. Olha, coincidentemente, na época em que resolvi implantar este recurso de comentários (Blogger/Facebook) aqui, o antigo gadget flutuante que eu usava deu problemas que, inclusive, afetou o próprio recurso.

      É apenas uma suposição, ok? Mas, talvez, pode estar havendo um conflito qualquer dos códigos do Facebook dos comentários com os do gadget flutuante. Aliás, já fui 'privado' de muitas coisas por conflitos entre os códigos do Face. Porém, como eu disse anteriormente, é apenas uma suposição!

      Sugestão prática: se você fez backup do seu template antes de implantar o recurso de comentários Blogger/Face, restaure-o e instale o gadget flutuante. Após isso observe se o problema ocorrerá ainda assim. Caso não saiba como fazer o backup, eis um tutorial abaixo.

      http://www.seututorial.com/2011/10/como-fazer-backup-completo-do-seu-blog.html

      Excluir
    4. Acabei de tentar sem o recurso de comentários e mesmo assim, nada.

      Utilizei duas contas do facebook, curti os posts do meu blog e não aparece na minha timeline e nem nas atividades recentes. Quando tento o mesmo em outros blogs (até tentei com esse) funcionou perfeitamente.

      Já testei esse e outros gadgets de like (fixos dentro dos posts) e nenhum deles funcionou. Curto a página e nada aparece no facebook. Antigamente funcionava, agora não funciona mais... Meu layout é cheio de frescuras, talvez estou copiando o código em um lugar errado, não sei.

      Agradeço mto a atenção. Se vc descobrir algo, por favor, me informe. Mto obrigada mesmo!

      Aqui o lonk do meu blog: http://www.vaiassistindoterror.com/
      Email: vaiassistindoterror@gmail.com

      Continuarei tentando resolver o problema. Se eu descobrir, comentarei aqui.

      Excluir
    5. Dei uma olhada em seu blog e curti um dos posts lá, e realmente a publicação não aparece no Face. Mas quando eu curti o post, o gadget ficou todo bugado, expandido em forma quadrangular à direita.

      Vou dar uma olhada direitinho no código-fonte do seu blog, e ver se encontro algo que possa estar provocando isso. Porém, como está utilizando o gadget do Ferramentas Blog, acho que seria mais viável perguntar para o autor que postou esse gadget lá.

      De qualquer maneira, ajudarei no que for possível e, caso encontre uma solução, peço que não hesite em me informar aqui.

      Excluir
    6. Muito obrigada pela atenção Marcelo!

      Então, testei o gadget daqui também e o mesmo bug ocorreu.
      Tentei outros tipos de gadgets, aqueles que o botão fica no post mesmo e não adiantou, não aparece no facebook.

      (já perguntei no Ferramentas Blog, mas não me responderam).

      Excluir
  22. Nem Testei + TOMARA QUE FUNCIONE JÁ VI ALGUNS POSTS + NÃO AJUDARAM ESSE TOMARA QUE ME AJUDE VISITEM MEU Blog : http://meu-windows-7.blogspot.com.br/

    ResponderExcluir
  23. o blog ta bom demais em,eu vou até recomenda para todos meus amigos pq é muito bom,da até gosto de ver,como estou recomendando o www.rastreamentodecelular.org que estou usando na minha empresa de www.detetive-particular.com que é muito bom tambem,nossa parabéns,to acompanhando teu blog,e vou recomendar,abraços

    ResponderExcluir
    Respostas
    1. Valeu, Luigi.

      Fico feliz que tenha gostado e agradeço antecipadamente a divulgação. Obrigado mesmo.

      Sucesso com a empresa e com o site!

      Grande abraço

      Excluir
  24. Rapaz, primeiramente, meus parabéns! São poucas as pessoas que dão tanta assistência assim ás dúvidas dos leitores, até entendo alguns, pois são muitas mensagens, e você, realmente, é super atencioso com todos os leitores. Esse tipo de consultoria que você dá nem mesmo pagando seria possível achar. Novamente, meus parabéns.

    ResponderExcluir
    Respostas
    1. Olá Diego,

      Antes de mais nada, agradeço imensamente seu comentário. Acho que a atenção é primordial em qualquer ocasião. Sempre que está a minha capacidade, tento ajudar da melhor forma possível.

      Obrigado mais uma vez e sinta-se sempre em casa aqui!
      Abraços e ótima semana, Diego!

      Excluir
  25. Funcionou maravilhosamente bem.
    Muito obrigada =)

    ResponderExcluir
  26. Muito Obrigado. Ficou 10 meu Blog !!! Abraços...

    ResponderExcluir
  27. OLÁ AMIGO, OBRIGADO PELA AJUDA.
    GOSTARIA DE SABER COMO EU COLOCO ESTE GADGET MAIS PARA CIMA.

    ABRAÇO!

    ResponderExcluir
    Respostas
    1. Modifique o valor de "bottom", no começo do script. O valor está 15%. Aumentando o valor, o gadget tende a ficar mais para cima da página.

      Excluir
  28. Parabéns, funcionou perfeitamente belo trabalho.

    ResponderExcluir
  29. Parabéns foi a unica barra que achei que funciona em todoas as resoluções.

    ResponderExcluir
  30. valew pela dica,.......... na verdade eu kiria msm era tirar a barra do meu blog,.... fiz o contrario

    rsrs

    ResponderExcluir
  31. O meu ficou muito bom,coloquei borda 0 e ficou parecendo ser parte do post. muito bom esse tutorial, o melhor que encontrei, para esse tipo de barra lateral flutuante..
    http://dinheiroaganharonline.blogspot.com.br

    ResponderExcluir
  32. Perfeito Marcelo. Esse modelo ST é sensacional.

    Era o que eu queria há mto tempo e só achei no seu site.

    Abraço

    ResponderExcluir
  33. CallOfDutySeries.com26 de dezembro de 2013 15:32

    Excelente msm. Ñ tava conseguindo add outros botões no do addthis pelo site deles..e seu tutorial foi certinho nos botões q eu queria.

    ResponderExcluir
  34. Oi Marcelo tdo bem?

    Eu coloquei em meu weblog o MODELO ST e deu tdo certinho. Mas o único problema é o botão do Pinterest que não tem contador.

    Vc pode me ajudar por favor?

    Obrigada e Feliz Ano Novo a todos! =]

    Kelly

    ResponderExcluir
    Respostas
    1. Olá Kelly,

      Isso não é problema com o gadget, mas sim com o Javascript que o Pinterest fornece mesmo. Aliás, nem é um problema.

      O contador só aparece quando alguém compartilhe algo clicando nele. Ele não mostra "0" no contador. Aparece somente a partir do "1".

      Abraços e Feliz Ano Novo para você e sua família!

      Excluir
  35. Olá Marcelo!
    Muito bom seu post, contudo tive um problema ao adicionar a barra flutuante em meu blog. O modelo que escolhi foi o AddThis, e o fundo (branco) ficou menor do que os botões. Não sei como corrir... se quiser dar uma conferida: http://coisaepensamento.blogspot.com.br/

    Grato,

    Jonathan

    ResponderExcluir
    Respostas
    1. Olá Jonathan,

      Por algum motivo desconhecido, a largura de sua barra foi automaticamente configurado em 60px (pelo que analisei em seu código). Talvez possa ser esse o motivo do background estar menor.

      Basta adicionar uma linha "width" no código.

      Veja se o código a seguir resolve:

      http://pastebin.com/raw.php?i=J2UjrhVR

      Onde está "width: 100px" é a largura do gadget. Altere para o valor desejado ou se não quiser substituir o código, basta adicionar a respectiva linha no seu código.

      Abraços

      Excluir
  36. Valeu brother! Ótimo trabalho!!!
    Sucesso e muito rock'n roll!!!!
    http://www.rocknorio80.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Valeu, Robson. Sucesso e muito rock'n'roll pra você também - afinal é a verdadeira música!

      Abraços

      Excluir
  37. Obrigado galera! foi o único tutorial útil quando o assunto é botões deste modelo em toda a internet! grande abraço!

    ResponderExcluir
  38. Parabéns pelo excelente post, Marcelo. Me ajudou muito. Acabei de implementar essa barra em meu blog www.euquerobiologia.com.br.

    Show!

    ResponderExcluir
    Respostas
    1. Valeu Guellity. Fico feliz que tenha ajudado.

      Abraços

      Excluir
  39. Muito obrigado mano. :) resultou perfeitamente...

    ResponderExcluir
  40. Eu gostaria de saber, Como posso colocar ele mais acima. pois ele esta muito abaixo!

    ResponderExcluir
    Respostas
    1. Maycon, qual das barras você está usando?

      As tags Bottom e Top são responsáveis pela distância da parte inferior (bottom) e da parte superior (top). Altere os valores (px) deles para ajustar isso.

      Abraços

      Excluir
  41. Não conhecia este seu site de tutoriais, muito bacana tudo aqui, seus tutoriais são realmente muito úteis, parabéns. Estou usando o código disponibilizado por você, ficou excelente, ganhou um novo seguidor :)

    ResponderExcluir
  42. olá gostei muito do seu post. as 3 barras que vc apresentou sao muito boas, mas eu gostaria de colocar no meu blog uma mais atual tipo essa que vc usa com o link do messenger. ficaria muito grato se vc pudesse compartilhar isso com a gente. :D

    ResponderExcluir
  43. Sensacional, muito obrigado e parabéns pelo trabalho! :)

    ResponderExcluir
  44. Olá, Marcelo! Muito boa a dica. Como faço para determinar a altura, ou seja, até onde vai pra cima e até onde vai pra baixo? Grato!

    ResponderExcluir
  45. Olá! A parte superior "top" para mudar a altura não se encontra. Como faz? Já que só a da parte inferior (bottom) aparece... ?

    ResponderExcluir
  46. tem como diminiuir o tamanho das caixas

    ResponderExcluir
  47. Marcelo ficou legal...
    https://conectadosaopaulo.blogspot.com.br/2017/08/anuncie-aqui.html

    ResponderExcluir