Botões de compartilhamento (AddThis) fixo no canto do seu site


    É muito usado em blogs e sites de todo o mundo o compartilhamento, e hoje você vai conhecer uma ferramenta para todo site que suporta HTML, você vai conhecer um script para o compartilhamento de conteúdo, tendo assim, o widget fixo no canto da tela.

   O código NÃO PRECISA SER ADICIONADO NO HTML do seu site, então vai ser rápido e fácil. Para adicionar o código:
Painel > Design > Adicionar Gadget > HTML/Java Script

Escolha o Modelo:

Fundo com cor:

<div style="background-color:#XXXXXX; border-right:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; left:0px;padding:2px"><div class="addthis_toolbox addthis_default_style 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>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script></div>
</div>

XXXXXX = Modifique a cor do fundo
000000 = Modifique a cor da borda I
000000 = Modifique a cor da borda II

Fundo transparente:

<div style="background-color:#transparent; border-right:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; left:0px;padding:2px"><div class="addthis_toolbox addthis_default_style 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>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script></div>
</div>


000000 = Modifique a cor da borda I
000000 = Modifique a cor da borda II


Fundo com imagem:

<div style="background: url(ENDEREÇO-DA-IMAGEM); border-right:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; left:0px;padding:2px"><div class="addthis_toolbox addthis_default_style 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>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script></div>
</div>


Endereço-DA-IMAGEM = Coloque o endereço da imagem
000000 = Modifique a cor da borda I
000000 = Modifique a cor da borda II

--//--

Modificando (ainda mais...)
Retirando a borda:
   Para retirar a borda do script exclua toda essa linha:
border-right:1px solid #000000;border-top:1px solid #000000;position:fixed;

Modificando o tamanho dos ícones:
   Para modificar o tamanho dos ícones modifique a linha:
addthis_toolbox addthis_default_style addthis_32x32_style

Para
addthis_toolbox addthis_default_style addthis_larguraxaltura_style


Ou, para deixa-los pequenos, modifique a mesma linha por:
addthis_toolbox addthis_default_style addthis_style



Comentários