Share buttons flutuantes: rápido, fácil e indolor

• Voltar ao Post

Barra com botões na Vertical

Barra ancorada na borda esquerda da tela do usuário, a 150px do topo.

<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;"><a class="a2a_button_facebook"></a><br /> <a class="a2a_button_twitter"></a><br /> <a class="a2a_button_google_plus"></a><br /> <a class="a2a_button_pinterest"></a><br /> <a class="a2a_dd" href="https://www.addtoany.com/share"></a><br /> </div><br /> <script async src="https://static.addtoany.com/menu/page.js"></script>

Barra de compartilhamento vertical que é fixa em relação a um 'elemento-pai' (o conteúdo principal do site), 150 pixels do topo da página, à esquerda desse 'elemento-pai' em 100 pixels.

<div class="example_parent_element" style="margin:0 auto; width:900px;"><br /> <div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="margin-left:-100px; top:150px;"><a class="a2a_button_facebook"></a><br /> <a class="a2a_button_twitter"></a><br /> <a class="a2a_button_google_plus"></a><br /> <a class="a2a_button_pinterest"></a><br /> <a class="a2a_dd" href="https://www.addtoany.com/share"></a><br /> </div><br /> <script async src="https://static.addtoany.com/menu/page.js"></script><br /> <br /> </div>

Barra com botões na Horizontal

Barra de compartilhamento horizontal ancorada embaixo e à direita.

<div class="example_parent_element" style="margin:0 auto; width:900px;"><div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" style="bottom:0px; right:0px;"> <a class="a2a_button_facebook"></a><br /> <a class="a2a_button_twitter"></a><br /> <a class="a2a_button_google_plus"></a><br /> <a class="a2a_button_pinterest"></a><br /> <a class="a2a_dd" href="https://www.addtoany.com/share"></a><br /> </div><br /> <script async src="https://static.addtoany.com/menu/page.js"></script><br />


Barra horizontal alinhada ao centro, ancorada abaixo da tela do usuário.

<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" style="bottom:0px; left:50%; margin-left:-100px;"> <a class="a2a_button_facebook"></a><br /> <a class="a2a_button_twitter"></a><br /> <a class="a2a_button_google_plus"></a><br /> <a class="a2a_button_pinterest"></a><br /> <a class="a2a_dd" href="https://www.addtoany.com/share"></a><br /> </div><br /> <script async src="https://static.addtoany.com/menu/page.js"></script><br />

Botões Flutuantes Responsivos

<style type="text/css"> /* Hide AddToAny vertical share bar when screen is less than 980 pixels wide */ @media screen and (max-width: 980px) { .a2a_floating_style.a2a_vertical_style { display: none; } } </style>

• Voltar ao Post

Material gentilmente cedido para tradução por Pat Divens do Add to Any.
Thank you so much, Pat! =D

O texto em inglês e os códigos originais estão neste link.