24 de mai de 2012

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 essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

4 comentários

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

    ResponderExcluir
    Respostas
    1. @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

      Excluir
  2. Esse widget só funciona em postagens!

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

    ResponderExcluir

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo