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

E aí, já escolheu o template novo para o seu blog? 

Sim, e é lindão... Só não tem share buttons no final da postagem.

Difícil, ainda mais quando demoramos um século pra escolher o modelo e a desgraça não ajuda já compramos o modelo e só vemos depois. Mas não se desespere. Eis aqui a solução! =D

Barra com botões na Vertical

Você pode posicionar sua barra de botões verticais flutuantes afixadas ao longo do conteúdo do seu site em uma barra lateral, ou ancorado nos extremos da tela do usuário.

O exemplo abaixo mostra uma que está 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>

O exemplo a seguir exibe uma barra de compartilhamento vertical que é fixa em relação a um 'elemento-pai' (geralmente o conteúdo principal do site), 150 pixels do topo da página, e está posicionada à esquerda desse 'elemento-pai' em 100 pixels.
(Nota da Iza: você pode alterar esses valores para a distância que melhor se adaptar ao seu layout, basta alterar os valores em "margin-left" e "top". )

O 'elemento-pai' precisa ter uma largura especificada e o código de barra de compartilhamento vertical deve ser colocado como um 'filho' desse elemento como no exemplo a seguir. A página atual exibe esse estilo é exibida em dispositivos com uma tela suficientemente larga.

<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

Você pode posicionar os botões horizontais numa "barra flutuante", que normalmente é ancorada
na margem inferior da tela do usuário, particularmente em dispositivos móveis.

O exemplo seguinte mostra uma barra de compartilhamento horizontal que fica 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 />


O exemplo seguinte mostra uma barra horizontal alinhada ao centro, ancorada abaixo da tela do usuário. O alinhamento central é feito especificando um valor de posicionamento á esquerda de 50% e o valor negativo do elemento "margin-left" que é igual à largura total dos ícones.

A largura desses ícones padrão podem ser calculados multiplicando o número de ícones por 40. Por exemplo, 5 ícones (multiplicados por 40) dão um valor de uma margem de -100px.

<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

Usando CSS queries, você pode especificar pontos de quebra para botões de compartilhamento responsivos flutuantes. Por exemplo, é comum que a barra vertical com os botões 'se esconda' em telas menores de smartphones e tablets.

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

• Copie os códigos

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. 

• Tweet
• Share
• Share
• Share
• Share

DisseIzabela Wilson

Graduada em Design Gráfico, ilustradora, artefinalista, colorista digital e curiosa de plantão. Apaixonada por qualquer coisa a respeito de animação e arte, tradicional ou digital.

Related Post