Seguidores do Google+ em box expansível na lateral do blog

em 25 de dezembro de 2013

box expansível com os seguidores google+ na lateral do blog
Há algum tempo eu mostrei aqui como colocar o box de curtir do Facebook em uma aba lateral.
Clique aqui e relembre o tutorial.

Desde então eu tenho recebido alguns pedidos para mostrar como inserir uma aba semelhante, mas dessa vez com os seguidores do Google+.
É bem simples o tutorial, vamos aprender?
Ficará assim:
http://contos.elainegaspareto.com/


Para ter em seu blog acesse a aba Layout em seu painel.
Clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Na janela que expandir cole este código:

<style> 
.post-body{
padding:8px 0 10px
} 
</style>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 500;
summary_img = 390;
img_thumb_height = 120;
img_thumb_width = 180;
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
<style type="text/css">
#gpplikebox{
background-color:#ffffff;
display:block;
padding:0;
z-index:99999;
position:fixed;
}
.gpplbadge{
background-color:#000000;
display: block;
height:150px;
top:50%;
margin-top:-75px;
position:absolute;
left:-47px;
width:47px;
background-image:url("http://2.bp.blogspot.com/-wDiWs6f80bg/UMHSnugJM7I/AAAAAAAAFVQ/vaxObWoVnjE/s1600/gplus-right.png");
background-repeat:
no-repeat;
overflow:hidden;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-bottomleft:8px;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
}
</style>
<script type="text/javascript">
(function(md){
md(document).ready(function(){
var $dur = "medium";
// Duration of Animation
md("#gpplikebox").css({right: -250, "top" : 100 })
md("#gpplikebox").hover(function () {
md(this).stop().animate({
right: 0
}, $dur);
}, function () {
md(this).stop().animate({
right: -250
}, $dur);
});
md("#gpplikebox").show();
});
})(jQuery);
</script>
<div id="gpplikebox" style="display:none;">
<div class="gpplbadge"></div>
<img src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/+ElaineGasparetoParada" data-source="blogger:blog:followers" data-width="245">
</div>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'pt'};
        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>

Agora preste atenção nas modificações de cores para combinar com seu blog:
background-color:#fff; nesta primeira ocorrência da propriedade background-color é definida a cor de fundo do gadget, ou seja: o fundo de onde aparecem os rostos dos nossos leitores. Caso queira trocar basta substituir o código #ffffff pelo código hexadecimal da cor que desejar.

background-color:#000000; nesta segunda ocorrência da propriedade background-color é definida a cor do botão Google+. Troque pela cor que desejar, substituindo #000000 pelo código da cor que preferir.
Escolha uma cor mais escura porque a imagem Google+ é branca.
Essas duas alterações são opcionais.

Mas esta terceira é obrigatória!
Onde você lê https://plus.google.com/+ElaineGasparetoParada refere-se ao endereço de seu perfil Google+.
Troque o endereço que está, que é o meu, pelo endereço de seu perfil.

Depois de efetuadas as modificações clique em Salvar e arraste para qualquer parte de seu layout. Salve as alterações.
A posição onde você deixar não afeta o lugar de exibição, que será sempre à direita, na lateral.

Com dificuldades para copiar o código ou usar os tutoriais do blog?
Leia:
Como usar os tutoriais deste blog?

Viu que simples que é?

Caso queira aprender como inserir várias abas ao mesmo tempo, com os leitores que curtiram a fanpage, os seguidores do Google+ e os seguidores do Twitter clique e veja este tutorial:
Box do Google+, do Twitter e do Facebook na lateral do blog- juntos em um único gadget


Gostou mas não está conseguindo deixar como deseja?
Escreve pra mim, nós combinamos o valor e eu faço pra você!


Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

4 comentários , comente também!

  1. Agradeço Elaine, por todo conhecimento que compartilha, desejando que 2014 seja pleno de realizações e que você e sua família sejam sempre muito abençoados, abraços carinhosos Maria Teresa

    ResponderExcluir
  2. Querida Elaine, olá!
    Desejo um 2014 pleno, cheio de paz, harmonia, saúde e muita fé sempre!
    Já estou de volta à blogosfera e muito feliz por isso!!!
    Ah, postei as fotos do livro. Espero que goste!

    http://meudocelarbykarinfilgueira.blogspot.com.br/2014/01/chegando-com-novidades-oba.html

    Bjs e muito obrigada mais uma vez e sempre!
    Deus abençoe!

    ResponderExcluir
  3. Muito obrigada pelas dicas e por toda a ajuda que você tem dado a mim e a tantas outras blogueiras! Te desejo um 2016 muito bom, cheio de conquistas e alegria! Beijos :)

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…