Widgets

Como colocar icones sociais flutuantes no blogger

6 comentários

  Como colocar icones sociais flutuantes no blogger

como adicionar ícones de Redes Sociais em uma coluna flutuantes no seu blog

Como colocar icones sociais flutuantes no blogger

Este e um tutorial sobre como adicionar ícones de Redes Sociais em uma coluna flutuantes no seu blog, sem mexer no código HTMl. Basta adicionar um gadget HTML/ JavaScript.

Estão incluídos os botões para Retweet, compartilhar no Facebook, Stumble, Google Buzz e Digg. Cada um deles vem com um contador de cliques. Você poderá adicionar outros botões de bookmarking compartilhamento futuramente, se desejar.
Adicionando os botões

1. Acessar o Painel do Blogger.
2. Ir para o Design >>> Elementos da página.
3. Clique em Adicionar um gadget.
4. Na janela que se abre, adicionar um Gadget HTML / Javascript .
5. Copie o código abaixo e cole-o dentro da caixa de conteúdo.

<!-- floating page sharer Start tudoseo.com-->
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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 title="Get this at tudoseo.com">
<div id='pageshare'>
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gb'>
<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'></script>
</a></div>
</div>
</div>
<!-- floating page sharer End -->

6. Salve o gadget.
7. Arraste o gadget para reposicioná-lo acima do gadget de postagem do seu blog.
8. Clique no botão Salvar.
Personalizar
1. Alinhamento Vertical
   Altere o valor de bottom na linha 2 do código, para alinhar os botões em relação à parte inferior da janela do seu navegador. Para corrigir a distância , mesmo quando a janela é redimensionada, especificar o valor em px (pixels) em vez de% .

2. Alinhamento horizontal
      Altere o valor de margin-left tambem na linha 2 do código. Valor negativo posiciona a coluna de botões à esquerda da coluna principal, valor positivo posiciona a direita.
      Para a posição do botão em relação à borda esquerda ou direita da janela do navegador, substitua o mesmo margin-left com esquerda ( left: 10px ;) ou direita (troque por right: 10px;), respectivamente.
 
3. Adicionando mais botões
      Você pode adicionar qualquer outro botão de compartilhamento para a coluna. Basta colocar o código de cada botão dentro de uma div, como este abaixo e inseri-lo logo antes do último - segundo </ Div> que esta em AZUL.

    <div class='sbutton'>
    CODIGO DO BOTAO AQUI
    </div>

Obs.: Veja os modelos de testes onde instalei este widget. Eu penso que, se o seu blog for muito largo, a coluna de botões não ficará bem visivel e encubrira o conteúdo do post. Observe no Blogger Sentral, do autor deste tutorial.
1. Minima 3 Colunas
2. Minima sidebar Direita

Creditos: Greenlava (Blogger Sentral)

Agora, tem este outro gadget com icones em 3D, que desenvolvi e que basta:

 2. Ir para o Design >>> Elementos da página.
3. Clique em Adicionar um gadget.
4. Na janela que se abre, adicionar um Gadget HTML / Javascript .
5. Copie o código abaixo e cole-o dentro da caixa de conteúdo.

<div style="position:fixed; bottom:20%; margin-left:-98px; float:left;width:60px;background-color:#ffffdf;padding: 5px;border:1px solid #000;border-right:none"><center><div class="addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></center></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script>
</div>
Caso o gadget fique sobre o seu texto, basta ir diminuindo a distância em(  margin-left:-98px) ou seja, diminuir, seria aumentar o numero, já que ele é um numero negativo....complicou, toma um cafezinho e depois retorna...

Tem também esta opção: no painel do blog, marqe a caixa expandir modelos de widgets e
 logo abaixo de  <b:includable id='post' var='post'>, mas atenção este gadgets não aparece na pagina principal, para que isto ocorra, deve-se retirar as duas primeiras linhas do código  que estão em vermelho.

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


Caso a largura de seu blog esteja interferindo com deste gadget, modifique a largura neste trecho( margin-left:-80px ) e salve, agora contineu no cafézinho e um abração no coração....


6 comentários:

  1. elhazzar04:05

    Esse tutorial é o máximo!! Estava procurando algo assim para meu blog. Obrigada!

    Porém, estou tendo dificuldades em inserir outros botões...

    E botão do Tweetmeme não está aparecendo! :(

    Gostaria de inserir botões do orkut, delicious, "adicionar a favoritos" e "View more Services".

    Poderia me ajudar?

    ResponderExcluir
    Respostas
    1. Ola Elhazzar! Este novo script esta com mais opções do que o anterior, pode aproveitar e mandar ver... aproveita... um abraço! (o)

      Excluir
  2. Anônimo19:32

    Merda, se desse pra copiar, mas num tuto vc coloca anti CTRL+c o que adianta...

    ResponderExcluir
    Respostas
    1. Ola, amigão! este problema começou de ontem para hoje, estou tentando resolver, mas fique calmo, pois isto não foi de propósito, pode acreditar, esta proteção era apenas para que copiava todo o conteúdo, mas conforme disse algo esta fora de controle..infelizmente meus textos são extremamentes copiados, por hora, tente copiar colar no notepad e retirar o que vem a mais... tipo read more:

      Excluir
  3. Faz horas que tô tentando e só aparece o do facebook e stumbleupon o resto nada. precisava que fosse igualzinho ao seu: Face, Twitter, Pin it, g+, share, e-mail e se desse colocar o do instagram. Por favor me ajuda. Me manda o código completo, por favor. Obrigada.

    ResponderExcluir
    Respostas
    1. Ola amiga, antes de qualquer coisa, agradeço seu feedback... agora.. a respeito de se acrescentar outros botões, é trabalhoso sim, acho que se visitar este link encontrará uma solução mais simples e completa que atenderá sua necessidade.. vai lá, e depois me diga se não é o que procura...https://www.addthis.com/get/follow

      Excluir

Todo comentário é bem vindo, pois acrescenta muito aos nossos posts, portanto, fique a vontade para debater sobre nossos assuntos...

setaretornoaotopo