Barra flutuante de Redes Sociais

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

O gadget é similar a este que uso aqui na lateral esquerda do post, cujo movimenta-se junto ao scroll, e possui três botões dos principais serviços da atualidade: Facebook, Twitter e Google+.

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.

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"

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

3. Exatamente ABAIXO (depois) deste código pesquisado acima, adicione TODO o código a seguir.

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

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

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.

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

Na quarta linha do código ainda, 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.

É isso, pessoal...

Posted in: Blogs