Gadget flutuande de ícones para Redes-sociais no Blog

Gadgets
10
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.

✅ Canal no Youtube | Inscreva-se AGORA ✅

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:

.

10 Comentários

  2. 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

  4. @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

  5. 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

  6. @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

  8. 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.