MASIGNCLEAN101

Box flutuante animado com Tweet, Curtir, +1 e Addthis

As redes sociais estão cada vez mais dispostas a ajudar a nós blogueiros. O que devemos fazer é simplesmente instalar nossos blogs nessas redes sociais, como o Facebook e o Twitter. E para isso, existem os gadgets que fazem isso. Os mais eficientes que podemos citar hoje são o Tweet (do Twitter), o Like (do Facebook), o +1 (lançado a pouco tempo pela Google) e o Addthis (esse incrível botão reúne várias formas de compartilhamento). Nesse artigo você vai ver como adicionar um gadget flutuante animado que reúne todos esses 4 botões.


Esse gadget anteriormente só podia ser usado em blogs da plataforma WordPress.org. Até então que blogueiro Claudio Sanches o adaptou para o Blogger, além de ainda  adicionar o botão do Addthis e complementar esse gadget.


Se você notar o exemplo, esse box flutua de forma animada enquanto rolamos a página do blog.

Como instalar?

Para instalar, basta ir em “Editar HTML” do blog e fazer uma cópia de segurançapara prevenir seu blog. Depois, marque a caixinha “Expandir modelos de widgets”.

Encontre a linha e logo ANTES dela, cole o código:



Não importa o lugar no seu layout que esse gadget ficará posicionado ele sempre aparecerá na posição que você configurar.

Veja como editar e escolher a posição dos botões flutuantes das redes sociais no seu blog:

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.

Depois de colado o código anterior, procure pela linha: e adicione o seguinte código logo ANTES:


Faça uma nova busca e encontre a linha: 
Divirtam-se!

OBS: O box só funciona dentro das página dos posts.
Compartilhe esse artigo!
Unknown
escreve para o Mundo Informal sob a licença Creative Commons BY-SA 3.0. Você pode usar e compartilhar este conteúdo desde que credite o autor e veículo original do mesmo.
avatar

:) muito bom mais eu queria um q funcionasse no blog enteiru ?

21 de dezembro de 2012 11:11
avatar
Anônimo

Esse widget só funciona em postagens!

21 de dezembro de 2012 11:29
avatar
Anônimo

Da hora esse script já instalei no meu blog! :p

21 de dezembro de 2012 11:30
avatar

@Lucas Richard,
Você vai precisar de outro widget para a função que você procura, pois esse widget só tem a possibilidade de ser exibido entre as postagens... Aqui no Mundo Informal você encontra outros widgets que fazem algo parecido com o que você procura... :D

21 de dezembro de 2012 11:33
Seja livre para expor seu pensamento!

Se preferir, antes leia nossa política para comentários...
Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!