Gadget flutuande de ícones para Redes-sociais no Blog

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Todos nós que temos blogs já sabemos da importância das redes sociais para divulgar o conteúdo que publicamos. Mais ainda quando o próprio leitor quem divulga. Os botões de compartilhamento dever estar sempre presentes em nossos layouts para que o visitantes com um simples clique, envie seu artigo para o Twitter, FaceBook e Google Buzz, mas também assine seu Feed para continuar voltando. Aqui temos um ótimo gadget de botões flutuantes de redes-sociais.


A idéia desse Gadget é colocar os ícones de redes-sociais flutuando ao lado dos artigos do seu blog, de forma bem visível para que os leitores cliquem para divulgar seus posts. Aqui adicionamos 4 botões importantes: Twitter, FaceBook, Google Buzz e Feed.

Veja funcionando nesse teste: http://testandobloggerfb.blogspot.com/

Ou a imagem de exemplo:

icones-flutuantes

Para colocar em seu blog no Blogger (Blogspot), basta seguir os seguintes passos, só alterando o que for indicado.

ATENÇÃO: Lembre-se de testar antes em um blog de testes e faça backup de todo o seu blog para evitar riscos quando mexer no código-fonte.

Passo 1.
Abra o painel do Blogger e clique no menu “Design” ~> “Designer de modelo”. Então agora clique em “Avançado” ~> “Adicionar CSS” como mostra a imagem abaixo:

adicionar-css-designer-blogger

Dentro desse espaço cole o seguinte trecho de CSS:
#share_scroller {
left:0;
position:fixed;
top:200px;
}
#share_button {
left:0;
position:fixed;
top:200px;
width:80px;
}
#shares {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-topleft:3px;
background-color:#ffffff;
border-color:#A5A5A5 #E8E7E7 #A5A5A5 #A5A5A5;
border-style:solid;
border-width:1px;
bottom:200px;
margin-top:10px;
position:fixed;
width:63px;
}
#shares .SMVote {margin:7px}
div.SMGap {background-color:#E3E3E3; height:1px; width:35px; margin:5px auto;}
/* FB button (shrink width) */
.fb_share_count_top {width:48px!important}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px!important}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px!important;}

Indicado de vermelho é o código que define a cor de fundo do elemento, caso você queira mudar. Mas só mexa nisso, em nada além.
Então clique no botão laranja, no canto superior direito, “APLICAR AO BLOG” e volte para o Blogger.

Passo 2.
Para aplicar definitivamente em seu blog, agora precisamos adicionar o HTML que faz tudo funcionar.

Ainda no menu “Design”, clique no “Editar HTML” e procure pela seguinte linha:

<body>

Imediatamente ABAIXO disso, cole o seguinte trecho, só fazendo as mudanças indicadas:

<!-- icones flutuantes -->
<div id='share_scroller'>
<div id='share_button'>
<div id='shares'>
<div class='SMVote'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='SMGap'/>
<div class='SMVote'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='SMGap'/>
<div class='SMVote'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='SMGap'/>
<div class='SMVote'><a href='URL_do_Feed_do-seu-Blog'><img src='https://ferramentasblog.com.br/imagens/rss3.png'/></a></div>
</div>
</div>
</div>
<!-- icones flutuantes -->

Na parte marcada de vermelho coloque o endereço do Feed de seu blog.
Salve o modelo e veja o resultado em seu blog.

Outros gadgets de ícones sociais:

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

10 Comentários

  1. Olá Marcos.Fiz tudo como está no tuturial mas o blogger dá-me este erro: "Não foi possível analisar o seu modelo por não estar bem formado. Certifique-se de que todos os elementos XML estão fechados correctamente.
    Mensagem de erro de XML: The value of attribute "src" associated with an element type "null" must not contain the '<' character."

    Como posso emendar?

    Responder

  2. @Etc,
    Realmente havia um erro no código que eu coloquei aí.
    Mas agora já está corrigido e funcionando perfeitamente. Pode usar como está no tutorial.

    .

    @Elisabete de Mello,
    Sim. Funciona para qualquer modelos de template do Blogger, tanto os novos quanto os antigos. Mesmo assim é importante fazer testes antes e ter um backup de seu blog.

    Responder

  3. Olá Marcos.
    Como sempre muito útil seu post mas como faço para colocar no lado direito? Eu fiz o teste e ele cobriu o nome do meu blog.

    Abraços,

    Renan

    Responder

  4. @Renan
    No Passo 1, no trecho de CSS, troque o trecho que começa por "#share_button" pelo que segue:

    #share_button {
    right:0;
    position:fixed;
    top:200px;
    width:64px;
    }

    Mas o ideal mesmo é ter um template com menos de 920px de largura total para não haver conflito com os ícones.

    Responder

  5. Pingback: Gadget Box Flutuante com botões de redes sociais para Blogger | [ Ferramentas Blog ]

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.