Gadget com Botões Flutuantes de Redes Sociais no Blogger

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">
<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>
Não importa o lugar no seu layout que esse gadget ficará posicionado ele sempre aparecerá na posição que você configurar.

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.

3 comentários:

Unknown disse...

:r

RSS Serviço Digital disse...

b

RSS Serviço Digital disse...

:k

Postar um comentário

:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t :u :v :x

Jonathan Kelves. Tecnologia do Blogger.