Publicidade

terça-feira, 22 de janeiro de 2013

Como por botões flutuantes (redes sociais) em seu blog

Olá galera do 'Blogando de verdade' neste tópico ensinarei a como por botões das redes sociais para compartilhar o mesmo. Isso é excelente, pois possibilita que os leitores divulguem nossos artigos em outros locais, tais como: Twitter, RSS, Orkut, Google Buzz, Facebook (mania do momento) e etc.
Existem muitos modelos de botões de redes sociais. Porém o que vou ensinar é um dos mais completos.

Vamos lá, mãos a obra: 1º faça login do Blogger, clique em layout, figura abaixo


Depois HTML/javascript e cole o código abaixo:

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



Não importa o lugar onde o gadget ficará posicionado, você poderá deixar em qual configuração optar.
Como editar a posição dos botões da redes sociais no seu blog.
Position:fixed; bottom:20%; margin-left:-98px: posição dos botões... então altere a altura na página 20% e o posicionamento horizontal modificando o valor -98px, aqui o valor é negativo ou seja o sinal de subtração (menos) faz parte do posicionamento.

float:left: lado que aparece a caixa.


width:60px: largura da caixa.


padding: 5px: margem entre as bordas da caixa e os botões.


background-collor:#fffdf: cor do fundo da caixa de botões de compartilhamento. Leia mais sobre cores

border:1px solid #000:border-right:none: neste trecho tiramos um lado da borda para parecer que a caixa de botões pareça com nosso layout.


Ficará assim:


Espero ter ajudado, e lembrando se tiver dúvidas, sugestão ou comentários, post em baixo.
Obrigado!

2 comentários:

  1. Olá, tudo bem?
    Não poderia deixar de fazer este comentário. Estava há dias procurando um código de botão suspenso que ficasse legal no meu blog e achei aqui.Fiz algumas alterações para arredondar as bordas e ficou show. Parabéns pela postagem.

    ResponderExcluir
  2. Show, Obrigado http://www.dicadeblog.com.br/

    ResponderExcluir