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

| 20 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

Conhecendo o arquivo
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:

Fundo Apagado

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:

Forma criada

Após uns efeitinhos:

Com alguns Efeitos

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

Trocando a cor dos textos

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="http://1.bp.blogspot.com/_NBm6T2_gd54/SW-QmTPOWkI/AAAAAAAAASo/OoUoOgwRSHU/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

20 comentários [Comente também!]:

portalmeira.com disse:

preferi nao usar o botao por achar mais clean somente o texto, mas ficou bem legal! Parabens +D

disse:

Amei!!! Ainda mais que esse é a cara do meu blog!!! Só que ao substituir o código, só mudou a cor dos números, as letras continuaram da cor vinho, uva, sei lá... Tô tentando!!! Brigadim!!!

SemNome disse:

@Lê, a cor "vinho/uva/sei lá" só pode ser modificada com o Photoshop. Baixe a imagem de fundo (no formato do Photoshop) e edite.

[]'s
SemNome

disse:

Sei fazer isso não... ainda, né... mas tá bunitim!!! QUEM SABE DEPOIS... VLW!!!
Bjsssss

disse:

Lindo, help!!!!! Troquei o template de um dos meus blogs e o povo tá dizendo que não consegue comentar... O que faço??? Já olhei em configurações e está certinho dizendo que qualquer um pode comentar... o que fazer??? Ninguém merce, só troquei pq o outro era complicado, com barra de rolagem que as pessoas tinham preguiça... e agora, isso??? Me ajude, pfvr!!! Bjsssssss

SemNome disse:

@Lê, no painel do blogger, vá em "Configurações", e em seguida, em "Comentários".
Em "Posição do formulário de comentários", selecione "Postagem abaixo incorporada" e salve. Veja se deu algum efeito.
http://usuariocompulsivo.blogspot.com/2008/06/como-habilitar-formulario-de.html ensina melhor. Esse artigo do Compulsivo mostra como habilitar corretamente.

[]'s
SemNome

disse:

Lindo, eu experimentei mudar para abrir janela pop-up e funcionou, aí retornei pra abrir comentários abaixo dos comentários e realmente não abre... coloquei pra abrir a janela por enquanto porque é melhor do que não ter comentários, né...
Outra coisa, tem 3 botões de menu abaixo da head (HOME, COMENTS(RSS) e ENTRIES (RSS))que são pra colocar os links dentro do HTML mas eu não consigo ou não coloco certo (por não saber como), e dá erro quando tento visualizar... achei que estav com um template simples e me ferrei!!!! rsrsrsrs
Desculpa amor, mas eu só peço socorro depois de tentar tudo... Vc mi juda??? rsrsrs
Bjsssss

SemNome disse:

@Lê, quanto à lista de links, vá em editar HTML, selecione "Expandir modelos de widgets" e procure por <div id='navigation'>. Lá você vai achar.
E quanto ao formulário de comentários, modifique o HTML como o compulsivo indica, assim você irá conseguir.

[]'s
SemNome

disse:

Sabe de uma coisa, fui no meu outro blog, copiei a parte de links no html e colei no outro... Dezzzzzzzzzzz!!!!!! Porque não pensei nisso antes????????? Mesmo assim, obrigad meu amor!!! Bjsssss

disse:

Lindo, como faço pra colocar o outro que vc fez, o cinza... mas com números pretos (ele fica com os a cor do blog e lá o fundo fica branco)??? Abusando, Lê

SemNome disse:

@Lê, na tag <div>, no style, adicione ";color:#000000!important" (sem aspas).

[]'s
SemNome

disse:

Valeu meu amor!!! Bjsssss

disse:

Lindo, quero fazer um pedido especialíssimo: Queria um contador de outra cor, mas não sei fazer nada disso aí... queria um igual ao prata, mas em vermelho... tem como??? Não me xingue, se não der é só falar: Não!!! Nem vou ficar chateada...
Bjsssssssssss

SemNome disse:

@Lê, basta salvar a imagem do outro contador no seu computador, abrir com o Photoshop (se tiver instalado no seu computador, claro), apertar Ctrl+B e modificar as cores. Depois, salve, hospede no Imageshack/Photobucket, pegue a URL da imagem e substitua no local indicado no código do post.

[]'s
SemNome

disse:

Tá legal!!! Vlw!!!

Simples Mulher disse:

Oi
Fiz coloquei, mas não aparece a numeração...pq será??O que fiz de errado??
Bjo e obrigada pelas Dicas.

SemNome disse:

@Simples Mulher, eu visitei o seu blog e está aparecendo...
Creio que já foi resolvido o problema...

[]'s
SemNome

Letícia Godoy disse:

Olá, eu tenho o seu contador prata no meu blog, só que hj ele surtou, está mostrando 26 comentários, sedo que tenho muito mais de 300 comentários.
O que será que aconteceu???
bjs

SemNome disse:

@Letícia, não entendi o motivo, mas realmente alguns blogs que utilizam esse widget (e a variação do compulsivo também) estão com esse problema.
A prova é tanta que até o Compulsivo tirou do blog dele... Vamos esperar mais um pouco e torcer para que ele volte a funcionar...

[]'s
SemNome

disse:

Pensei que era só o meu!!! Tirei tbm... Depois, retorno se resolver!!!!
Bjsssss

Postar um comentário

Antes de comentar, leia:

  • Não serão permitidos comentários com ofensas pessoais
  • Não serão permitidos comentários com conteúdo referente à pirataria
  • Os comentários devem ter ligação direta com o assunto
  • Não serão tolerados comentários com links para promover outros blogs.
  • Se quiser deixar um link, comente com a opção OpenID
  • O comentário será lido antes de ser publicado e só será publicado se estiver de acordo com as regras
  • Os comentários não refletem a opinião do autor do blog
  • O autor do blog não se responsabiliza pelo conteúdo dos comentários postados por outros visitantes