Personalizando o Botão Contador de Posts e Comentários

Lembra do Botão contador de Posts e Comentários? Ele foi baseado no Widget Contador de Posts e Comentários do UsuárioCompulsivo. A pedido de uma leitora, eu criei esse tutorial.
Para poder customizar o seu próprio widget, é necessário que você tenha o Photoshop instalado no seu computador. O objetivo desse artigo é ensinar como mudar o fundo do botão, assim como cores e formato, já que para mudar a posição dos nomes e números é necessário um pouco mais de prática com CSS. Então, vamos lá:
 

1 – Baixe o arquivo da imagem de fundo, clicando aqui.
2 – Abra o arquivo;

Entendendo o arquivo

1 – Agrupamento de camadas “Texto”
Onde ficam as camadas com texto

2 – Camada “Artigos”
A Camada onde fica a palavra “Artigos”. Não é recomendável que você mexa nela, a não ser para mudar a cor.
3 – Camada “Comentários”
A Camada onde está escrito “Comentários” (não diga...). Como a camada anterior, não é recomendável que você altere a camada, a não ser que você saiba o que você está fazendo.
4 – Camada “Moldura - Textos”
Nessa camada ficam as molduras onde entrarão os números. Ela está bloqueada, então não mexa nela, a não ser que você mexa no CSS e em outras coisas (Lembra do objetivo do artigo?).
5 – Camada “Camada 1”
Camada onde está o degradê de efeito do botão (erro: esqueci de renomear a camada). Essa você pode excluir e fazer qualquer outro efeito.
6 – Camada “Fundo / Moldura”
A camada onde fica o fundo do botão, a cor e os efeitos. Perceba que o fundo atrás dela é transparente. Essa camada, como a “Camada 1”, você pode excluir, já que você irá personalizar.

Mãos na massa

1 – Modificando o fundo
Após abrir o arquivo, vá na camada “Fundo / Moldura”, aperte Ctrl+A e depois a tecla “Delete” (Selecionar tudo e deletar). Exclua a “Camada 1” e o efeito de traçado da camada “Fundo / Moldura”. Irá ficar assim a sua imagem:

2 – Colocando um fundo
Na camada “Fundo / Moldura”, escolha uma forma personalizada ou faça o que você quiser (o widget é seu!) com a imagem. O importante é só deixar ela por trás do resto da imagem. Eu utilizei uma forma personalizada:

Após uns efeitinhos:

Trocando a cor do texto (tem que mudar de cada um):

3 – Salvando
Com a imagem pronta, vá em Arquivo – Salvar como (File – Save As) (Ctrl+Shift+S) e salve no formato PNG ou GIF, pois estas têm suporte a fundo transparente. Se você colocou algum brilho externo ou sombra, você deve usar o formato PNG (recurso da transparência não suportado em versões do Internet Explorer anteriores à 7).

Publicando

Para seu botão contador ser visualizado pelas outras pessoas, você deve hospedar a imagem (PNG ou GIF) em algum servidor, como ImageShack, Photobucket, ou no Picasa. Após pegar o link da imagem (Direct Link ou algo parecido, aquele que leva somente à imagem), continuemos com o tutorial:

1 – Código básico
Este é o código original do Botão Contador de Posts e Comentários do SemNome:

<script type="text/javascript">
  function showpostcount(json) {
  document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
  }
</script>
<div style="width:108px; height:43px; position:relative; font-size:13px; font:Verdana, Arial, Helvetica, sans-serif!important;color:#000000">
<span style="position:absolute; top:5px; right:7px;">
<script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
</span><span style="position:absolute; bottom:5px; right:7px;">
<script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script>
</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT1-0v6ox1KVbs1M9lgLA6-dgZsSBeeY3__917SPhL0W70xWYk1fYYD7EBpE_wRuLT1PT8l3RRK66SVmUQebcT2SRDD4KCab5eFu6WbHgmYXEmqwVbqvKCXGQ7BhTW9sSCiTe3RbYHX13C/s320/count+blogger.png" /></div>
<span style="font-size:11px"> Widget by <a href="http://semnome.net" target="_blank" title="SemNome">SemNome</a> </span>

2 – Substituindo os campos em Negrito
Essa é a parte mais fácil: basta substituir o primeiro campo em negrito pelo código da cor que você quer usar como texto e o segundo é a URL da imagem que você hospedou.
Pronto! Agora é só colocar no seu blog em um Widget HTML/Javascript e dizer: “Eu que fiz”!

Resultado

O botão final desse tutorial foi esse:

Widget by SemNome

Caso queira usar esse novo modelo em seu blog, basta copiar o seguinte código para o seu blog, em um widget HTML/Javascript:

Novo Botão Contador de Posts e comentários

<script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); } </script> <div style="width:108px; height:43px; position:relative; font-size:13px; font:Verdana, Arial, Helvetica, sans-serif!important;color:#50008E;"> <span style="position:absolute; top:5px; right:7px;"> <script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> </span><span style="position:absolute; bottom:5px; right:7px;"> <script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> </span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVjLYTPA1s26aCoIN4cY-HbLChSKpLGMqOzpNFUiM0d9wnBC4n_S-jRJxUnwA-cErDI9x1pcmxpnIDWxvvNUyN0hn4Xg-fX1DOZqdI4-iWn5oov0qTXh7VMbFJSaRdUPxJgic2Z971CEi/s320/new_count.png" /></div><span style="font-size:11px"> Widget by <a href="http://semnome.net" target="_blank" title="SemNome">SemNome</a> </span>