Topsy - Botões de Retweet Editáveis

Há um tempo atrás, eu publiquei um artigo com um tutorial que explica como Colocar Botão Retweet no Blog.
Hoje irei mostrar uma outra opção de botão, o Topsy.

Opções de Cores dos botões

A ferramenta Topsy oferece diversos modelos de botões com outras opções de cores, e o mais legal, é que com esta ferramenta, você pode enviar seus posts ao Twitter mais de uma vez (diferente do TweetMeme que permite apenas 1 envio por usuário), bem como a variedade de cores dos botões oferecida pelo site, dando a opção de escolha de botão nas cores que mais lhe agrada e que mais combina com as cores de seu blog.

A @Lu me indagou se havia outras opções de cores para o botão do TweetMeme, resolvi pesquisar e acabei conhecendo a ferramenta do Topsy.
Depois que conheci esta ferramenta, efetuei logo a mudança( que vocês já podem conferir aqui na parte superior, abaixo do titulo deste post).

O processo de instalação é simples, e você pode confeirir os modelos disponíveis aqui nesta página.

Vou ensinar aqui, como configurar o código do botão compacto ou completo, disponibilizado pelo site, mostrando as partes que você deverá alterar, de acordo com a cor e modelo que você escolher.

Botão Completo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float: right; margin-left: 1em;">
<script type="text/javascript">
var topsy_nick = "SEU-NOME-DE-USUARIO-NO-TWITTER";
var topsy_theme = "blue";
var topsy_style = "big";</script>
<script src="http://cdn.topsy.com/button.js" type="text/javascript">
</script>
</div>
</b:if>

Botão Compacto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float: right; margin-left: 1em;">
<script type="text/javascript">
var topsy_nick = "SEU-NOME-DE-USUARIO-NO-TWITTER";
var topsy_theme = "blue";
var topsy_style = "small";</script>
<script src="http://cdn.topsy.com/button.js" type="text/javascript">
</script>
</div>
</b:if>

Editando o código, personalizando cores e tamanho do botão:

Nos 2 códigos postados acima, usei o botão na cor azul, para exemplificar, mas você pode escolher umas das cores disponibilizadas pelo Topsy.
Veja as mudanças que você pode fazer no código(Não retire as aspas no código):

var topsy_nick = "SEU-NOME-DE-USUARIO-NO-TWITTER" :
coloque o seu nome de usuário no twitter no local indicado.

var topsy_theme = "blue" :
Onde está escrito blue coloque o nome referente a cor que você escolheu, disponivel no site.

var topsy_style:
Small -> é o código referente ao botão compacto.
Big -> é o código referente ao botão completo.

No código fornecido acima o botão aparecerá apenas nas páginas internas(página dos posts).

Exemplo: Veja como ficaria o código completo do botão na cor Mostarda:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float: right; margin-left: 1em;">
<script type="text/javascript">
var topsy_nick = "gothicdarkness";
var topsy_theme = "mustard";
var topsy_style = "big";</script>
<script src="http://cdn.topsy.com/button.js" type="text/javascript">
</script>
</div>
</b:if>

DICA:Caso você queira que seu botão fique à esquerda, basta substituir float:right por float:left, no código.

Onde instalar o código:

Agora que você já escolheu e já configurou o seu botão, veja neste post as opções de local mais adequado para colar o código.