Os botões de compartilhamento são uma das ferramentas mais usadas do site Add This. As redes nas quais podemos compartilhar postagens são muitas, o código é simples, é super personalizável e responsivo, por isso optei por usá-los. Vou mostrar como adicionar esses botões personalizados aqui no blogger, mas o site oferece opções para diversas plataformas.
1. Acesse o Add This e crie uma conta.
2. Em Select a tool escolha share buttons.
3. Agora é só escolher o layout que gostar mais para seus botões de compartilhamento. Vou optar por esse inline porque vou adicionar no rodapé da postagem. Clique em Continue.
4. Aí você pode escolher as redes principais para ficar visíveis e o botão + com outras opções. Para escolher as redes que quiser, marque Selected by you. Em Add more services adicione outras, como o whats app, por exemplo, e clique e arraste as redes para organizar.
5. Em Design (ícone entre o + e 3k) você pode deixar visível apenas os ícones das redes (marcando hide network names), arredondar bordas, usar os botões responsivos (que ficam bons em qualquer tela) e escolher as cores dos seus botões (em Button Color - Custom). Deixei o meu como default, cores padrões porque depois vou deixar essas cores mais fofinhas!
Ainda é possível mostrar ou ocultar contadores de compartilhamento, definir posicionamento e comportamento, aí é vc quem sabe.
6. Quando terminar de organizar, clique em Activate tool. O site gera um código para você. Para usar no Blogger, copie o código da opção An Html site; é o trecho da caixinha azul que começa com:
<!-- Go to www.addthis.com/dashboard to customize your tools -->
E copie o da caixa azul Inline também.
7. No html do seu template procure por <div class='post-footer'> ou por post-footer e abaixo dele cole esse código:
<center>
Compartilhe:<br/>
<div class='shareme'>
COLE O CÓDIGO DO ADDTHIS AQUI
</div>
</center>
Se quiser que os ícones não apareçam na página inicial do seu blog, deixe assim:
<b:if cond='data:blog.pageType == "item"'>
<center>
<b> Compartilhe:</b><br/>
<div class='shareme'>
COLE O CÓDIGO DO ADDTHIS AQUI
</div>
</center>
</b:if>
8. Visualize e salve. Eu adicionei filtro que faz com que as cores das redes sociais continuem as mesmas, com tonalidades mais fofas. Antes de /b:skin, cole:
.shareme{filter: hue-rotate(-10deg) brightness(2) saturate(0.9) contrast(1);
}
E pronto!
Imagem do início da postagem: Styled Stock
0 Comentários
Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.
Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.
Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.
Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart