Assine Nosso Feed!

Receba Nossas Atualizações em Seu E-mail:

  • Receba Todos os Nossos Artigos Automaticamente em Seu E-mail
  • Tenha a Exclusividade de Receber Boletins do Nosso Blog
  • Inscrever-se no feed do Nosso Blog é Fácil, Rápido e Seguro
  • Ajude a fazer Nosso Blog Crescer!!!


  • 12 de janeiro de 2013

    Caixa de seguidores do Google + na lateral do blog com efeito deslizante

    Todos sabem a importância das redes sociais para um blog, são ótimas ferramentas de divulgação e fidelização de leitores, o Google + ou Google Plus não é diferente a interação do blogger com a mesma é tão grande que ajuda também melhorar o posicionamento nos mecanismos de busca, e para conseguir seguidores  foram lançados muitos gadgets, a caixa de seguidores tanto para uso perfil quanto para página  foi um dos melhores lançamentos no ano de 2012 como pode ver no artigo abaixo
     E hoje  aprenderemos como coloca-la na lateral do blog com efeito deslizante de forma fácil e rápida.



    Para adicionar em seu blog é simples va em Layout →Adicionar um Gadget→ HTml/Javascript e cole o código abaixo:

     <style>
    #flotante1 {
    position:fixed;
    top:100px;
    right:-250px;
    float:right;
    width:288px;
    display:block;
    padding:0;
    z-index:1002;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    #flotante2 {
    position:fixed;
    top:100px;
    right:-250px;
    float:right;
    width:288px;
    display:block;
    padding:0;
    z-index:1003;
    border-radius:10px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    #flotante3 {
    position:fixed;
    top:380px;
    right:-250px;
    float:right;
    width:288px;
    display:block;
    padding:0;
    z-index:1004;
    border-radius:10px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    #flotante1:hover, #flotante2:hover, #flotante3:hover {
    right:0px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    div.likeboxwrap {
    margin-top:-5px;
    margin-left:-45px;
    width:238px;
    height:325px;
    background-color:#fff;
    overflow:hidden;
    border-radius:10px;
    }
    </style>



    <!-- Segunda pestaña -->
    <div id='flotante2'>
    <img src='https://lh4.googleusercontent.com/-K83Jb-0JTqo/UPG7lAhyXvI/AAAAAAAAEK4/-SQ2vLSSuhU/s159/goo_tab.png' style='float:left;'/>
    <div style='background: #9e0202; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap' style="padding-left:20px; padding-top:15px; height:310px !important;">

    <div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/b/XXXXXXXXXXXXXXXXXX" data-source="blogger:blog:followers" data-width="240">
    </div>
    <script type="text/javascript">
    (function() {
    window.___gcfg = {'lang': 'es'};
    var po = document.createElement('script');
    po.type = 'text/javascript';
    po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
    })();
    </script>

    </div></span></div></div>

    Para alterar a distância do topo do blog procure  top:100px;  que está na cor vermelha e troque o valor 100 pelo numero que deseja lembrando que quanto maior o numero mais distande do topo ele ficará.

    E no lugar de https://plus.google.com/b/XXXXXXXXXXXXXXXXXX coloca o endereço da rede social seja da página ou perfil pessoal.


    Exemplo

    Espero que gostem só não esqueça de comentar 

    19 comentários:

    1. Excelente dica, o Google + vem ganhando espaço a cada dia e investir nessa rede social é de suma importância para o crescimento de um blog.

      Abração.

      ResponderExcluir
      Respostas
      1. Concordo com sua opinião realmente está ganhando espaço e cada dia que passa notamos a importância para nosso blog, muito obrigado pelo comentário.

        Grande Abraço.

        Excluir
    2. Olá Juliano,

      essa caixa do Google+ ficou bem elegante e atrativa, parabéns.

      Abraço!

      ResponderExcluir
      Respostas
      1. Claudio, fico feliz em saber que tenha gostado muito obrigado pela participação.

        Grande Abraço ;)

        Excluir
    3. Olá Juliano.

      O efeito ficou lindo, parabéns. Vou utilizar em um blog meu.

      Abraços!

      ResponderExcluir
      Respostas
      1. Herlan, bom vê-lo por aqui e o melhor que gostou do Widget, muito obrigado pelo comentário.

        Abraços!

        Excluir
    4. Gostei do blog. Muito bom o artigo. Sucesso aqui também Juliano.

      ResponderExcluir
      Respostas
      1. Muito obrigado pela visita, volte sempre.
        Abraços!

        Excluir
    5. Nossa, ficou lindo! E SUPER fácil de fazer... Parabéns! Vejam como ficou: www.assombrado.com.br

      ResponderExcluir
      Respostas
      1. Olá Ana Paula,

        Dei uma olhadinha no seu blog, parabéns, muito obrigado pelo comentário volte sempre,
        Abraços

        Excluir
    6. Olá,

      óptimo efeito, está de parabéns!

      Abraço!

      ResponderExcluir
      Respostas
      1. Agradeço pela participação aqui no TB espero que volte sempre.
        Abraços!

        Excluir
    7. Respostas
      1. Olá Lucas,

        Realmente é um belo WidGet e muito eficaz, ficou excelente em seu blog,
        Sucessos e grande Abraço.

        Excluir
      2. olá Juliano adorei esse Widget,mais gostaria de saber como deixá-lo em português,
        pois o meu não ficou :\
        Obrigada :D

        Excluir
    8. Cara como eu faço um desse para o twitter??????
      Parabéns pelo blog
      www.discografianacional.blospot.com.br

      ResponderExcluir
    9. Olá Parabéns realmente es brilhante agora queria saber como colocar do lado esquerdo obrigado

      ResponderExcluir
      Respostas
      1. lizeu Alfaia, você sabe que o Blogger tem em ditar personalizar modelo Layout colocar para esquerda que vai tudo para esse lado ok?sucesso.

        Excluir
    10. Juliano Sousa quero te agradecer, estava a procura para meu blog nunca que encontrava sem querer entrei e dei com esses códigos mas não sabia que era aquilo que há tanto tempo procurava,eu simplesmente amei! queria colocar da cor do nome de meu blog mas tenho até medo de fazer algo errado e sumir com tudo, desejo tudo de bom parabéns continua assim ensinar quem não sabe beijo.

      ResponderExcluir