Gadget com Botões Flutuantes de Redes Sociais no Blogger
Entre na pagina layout > adicionar gadget > html/javascript e cole esse código.
<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">Não importa o lugar no seu layout que esse gadget ficará posicionado ele sempre aparecerá na posição que você configurar.
<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>
Como editar
position:fixed; bottom:20%; margin-left:-98px: posicionamento da caixa, então altere a altura na pagina 20% e o posicionamento horizontal modificando o valor -98px, aqui note que o valor é negativo ou seja o sinal de 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-color:#ffffdf: cor de fundo da caixa de botões de compartilhamento, veja o código das cores.
border:1px solid #000;border-right:none: neste trecho retiramos um lado da borda para parece que a caixa com os botões flutuantes fazem parte do nosso layout, leia mais detalhes sobre o códigos CSS para fazer bordas.
Assinar:
Postar comentários
Jonathan Kelves. Tecnologia do Blogger.
3 comentários:
:r
b
:k
Postar um comentário