Personalizando o Widget Twitter+FeedBurner

Como eu havia prometido, hoje ensinarei a personalizar o Widget Contador de Seguidores do Twitter/Leitores de Feed. Afinal, widgets foram feitos para serem personalizados, não?!
Como nem todos sabem mexer com CSS/HTML, além de ensinar a personalizar, também darei alguns exemplos prontos. Vamos lá!

Como Personalizar o Widget Contador do Twitter/Feedburner com CSS

Se você conhece CSS, você entenderá tudo que será apresentado aqui. Se não entende (e nem quer entender), pule para os exemplos prontos.
Aí estão as explicações:

• .feedburnerc = Classe do parágrafo com o contador FeedBurner
• .twitterc = Classe do parágrafo com o contador do Twitter
• .snnum = o número de seguidores/leitores, para serem diferenciados dos sufixos
• O contador contém links. Então, para personalizar as cores e retirar o sublinhado, basta usar .feedburnerc a e .twitterc a

Personalizando adicionando tags no sufixo
Se você utilizar tags de imagens ou outros parágrafos/spans nos sufixos, o seu widget ficará mais original. Imagens também funcionam bem.

Exemplos

- Texto azul, alinhado à direita

<style type="text/css">
.feedburnerc, .twitterc{/*Configurando tamanho, fonte, alinhamento e espaçamento do Widget*/
font-size:16px; /*O tamanho dos sufixos*/
margin:1px;padding:0; /*Espaçamento das linhas do Widget. Recomendo deixar assim.*/
text-align:right; /*Alinhamento à direita. Se quiser à esquerda, é só mudar para 'left'. Se quiser o texto centralizado, mude para "center" */
font-family:Arial, Helvetica, sans-serif; /* Estilo da Fonte. Você pode mudar ou apagar essa linha, para deixar a fonte padrão do seu blog*/
}
.feedburnerc a, .twitterc a{/*Configurações de Cor e efeitos do Widget*/
text-decoration:none;/*Removendo o sublinhado dos links*/
color:#0000FF;/*Mudando a cor dos links*/
}
.snnum{ /*Configurando o número, se você quiser maior que os sufixos*/
font-size:20px;/* O tamanho do número, para diferenciar das palavras */
}
</style>
<script type="text/javascript">
var twitter = "semnome_net"; //Seu Username (nome de login) do Twitter
var feedburner = "semnome-net"; //A URI do seu Feed no FeedBurner
var feedsufix = "Leitores"; // O que aparecerá depois do número de Leitores do Feed
var twitsufix = "Seguidores"; // O que aparecerá depois do número de Seguidores do Twitter
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

- Texto Vermelho, alinhado à esquerda

<style type="text/css">
.feedburnerc, .twitterc{/*Configurando tamanho, fonte, alinhamento e espaçamento do Widget*/
font-size:14px; /*O tamanho dos sufixos*/
margin:1px;padding:0; /*Espaçamento das linhas do Widget. Recomendo deixar assim.*/
text-align:left; /*Alinhamento à direita. Se quiser à esquerda, é só mudar para 'left'. Se quiser o texto centralizado, mude para "center" */
font-family:Arial, Helvetica, sans-serif; /* Estilo da Fonte. Você pode mudar ou apagar essa linha, para deixar a fonte padrão do seu blog*/
}
.feedburnerc a, .twitterc a{/*Configurações de Cor e efeitos do Widget*/
text-decoration:none;/*Removendo o sublinhado dos links*/
color:#FF0000;/*Mudando a cor dos links*/
}
.snnum{ /*Configurando o número, se você quiser maior que os sufixos*/
font-size:16px;/* O tamanho do número, para diferenciar das palavras */
}
</style>
<script type="text/javascript">
var twitter = "semnome_net"; //Seu Username (nome de login) do Twitter
var feedburner = "semnome-net"; //A URI do seu Feed no FeedBurner
var feedsufix = "Leitores"; // O que aparecerá depois do número de Leitores do Feed
var twitsufix = "Seguidores"; // O que aparecerá depois do número de Seguidores do Twitter
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

- Texto Preto, centralizado e com um texto menor embaixo (legenda)

<style type="text/css">
.feedburnerc, .twitterc{/*Configurando tamanho, fonte, alinhamento e espaçamento do Widget*/
font-size:18px; /*O tamanho dos sufixos*/
margin:1px;padding:0; /*Espaçamento das linhas do Widget. Recomendo deixar assim.*/
text-align:center; /*Alinhamento à direita. Se quiser à esquerda, é só mudar para 'left'. Se quiser o texto centralizado, mude para "center" */
font-family:Arial, Helvetica, sans-serif; /* Estilo da Fonte. Você pode mudar ou apagar essa linha, para deixar a fonte padrão do seu blog*/
}
.feedburnerc a, .twitterc a{/*Configurações de Cor e efeitos do Widget*/
text-decoration:none;/*Removendo o sublinhado dos links*/
color:#000000;/*Mudando a cor dos links*/
}
.snnum{ /*Configurando o número, se você quiser maior que os sufixos*/
font-size:22px;/* O tamanho do número, para diferenciar das palavras */
}
.min{
font-size:65%;
}
</style>
<script type="text/javascript">
var twitter = "semnome_net"; //Seu Username (nome de login) do Twitter
var feedburner = "semnome-net"; //A URI do seu Feed no FeedBurner
var feedsufix = "Leitores<br /><s"+"pan class='min'>Assine Também!</s"+"pan>"; // O que aparecerá depois do número de Leitores do Feed
var twitsufix = "Seguidores<br /><s"+"pan class='min'>Siga Também!</s"+"pan>"; // O que aparecerá depois do número de Seguidores do Twitter
</script>
<script src="http://semnomenet.googlecode.com/files/tfbcounter.js" type="text/javascript"></script>

E ficamos por aqui. Se você tiver uma noção mínima de CSS, você poderá fazer um widget muito bom. E lembre-se de trocar semnome_net e semnome-net pelos seus dados.