Em meu post anterior, publiquei um plugin para colocar o Box Flutuante com os botões de compartilhar que temos aqui no [ Ferramentas Blog ], mas para usuários do Wordpress. Agora vou ensinar como inserir o widget no Blogger/BlogSpot que funcionará da mesma forma, como é o plugin para WP. você poderá adicionar facilmente em seu blog para facilitar a divulgação de seus conteúdos.

Se olhar na lateral desse post, como de todos aqui do Blog, verá uma barra flutuante no lado esquerdo, com ícones e botões de divulgação de conteúdo em redes sociais. Nosso primeiro modelo foi para usuários do WordPress.org, como você pode ver no link abaixo:

• Plugin para WordPress: Box Flutuante com botões de redes sociais

Mas agora também criamos a versão do código para quem usa o Blogger e quer colocar esse mesmo recurso com os mesmos efeitos.

Backup do template do Blogger/Blogspot:

Antes de fazer qualquer alteração em seu template, realize um backup do mesmo em Modelo > “Fazer backup / Restaurar modelo”:

Basta clicar no botão “Fazer download do modelo completo” e salvar o arquivo em seu computador.
Caso algo saia errado durante a instalação, basta voltar a esta página e selecionar o arquivo baixado e fazer seu upload.

Para mais detalhes, leia também:

• Como editar Templates e fazer backups no Novo Blogger?
• Como criar um Blog de testes e de backup

Instalando o Box Flutuante em seu Blogger/Blogspot:

Vamos mostrar todo o procedimento pelo novo painel do Blogger que você pode acessar usando o endereço http://draft.blogger.com/. Se você não sabia, o Blogger está com um novo layout e estrutura de painel: Novo Blogger liberado para todos os usuários.

Com este código que vamos ensinar, são inseridos automaticamente os botões das seguintes redes sociais:

• Botão de RT do Twitter
• Botão Google +1
• Botão “Curtir” do Facebaook
• Botão “Enviar” de grupos do Facebook

Vá até o menu “Modelo” e procure por “Editar modelo”, então clique para “Expandir modelos de widgets”:

Depois de feito isso procure pela tag </head> (utilize o atalho CTRL + F para realizar a busca). Exatamente ACIMA dela você irá colar o seguinte código:

Ainda nesta mesma página e dentro do código fonte do Blogger onde você está, procure pela tag </body>. ACIMA dela cole este outro código:

Finalmente procure pela linha de código <div class=’post-footer-line post-footer-line-3′> e cole ABAIXO dela este código:

Agora clique no botão “Salvar modelo” e veja o resultado que irá aparecer APENAS dentro das páginas dos posts e não na home do blog.

Personalizando o widget:

Podemos ainda personalizar o widget, primeiro de tudo mudando o usuário do Twitter. Procure pelo trecho:

Nele basta substituir o “ferramentasblog” pelo seu nome de usuário no Twitter.

É possível também modificar a distancia entre o post e o Widget, para isso basta alterar a margem que for determinada na seguinte linha:

Basta alterar o -100px que é encontrado em “margin:0 0 0 -100px“. Quanto maior o numero negativo, mais longe do post ele irá ficar.

E ainda nesta parte do código podemos alterar a posição inicial do widget na tela, para isso altere o valor de “top:200px“.

Finalizando:

Agora quando eu estava escrevendo este post, o Marcos Lemos lembrou que já havia publicado algo similar aqui em:

• Gadget flutuande de ícones para Redes-sociais no Blog

O post é de um ano atrás e o resultado final, como já disse é similar ao o que eu ensinei aqui hoje. Porém este widget novo conta com os botões sociais do momento, ele aparece apenas dentro dos posts e conta com efeitos ao descer a tela. Portanto é mais completo e mais aconselhável.

Código atualizado em 30/01/2012:

Atualizamos o código inserindo as novas versões dos botões do Twitter, Google Plus e Facebook (atualizados com código compatível ao HTML5), além de realizar outras melhorias nos códigos.
Esta atualização deverá ajudar todos aqueles que estavam com dificuldades de inserir os botões em seus blogs.