Colocando e editando um contador de acessos
Autor: Vitor Farias | Publicado: 2010-03-21T00:46:00-04:00

Neste artigo você aprenderá como colocar um contador de acessos na sua pagina publica, no seu blog, ou no seu site, e inclusive no ORKUT. E também aprenderá um pouquinho de HTML ao longo do post. Confira!!!

Primeiramente, me perdoem por não estar mais postando no blog!! Não tenho tido tempo para fazer o post, e como vocês sabem, tudo que faço, eu quero com qualidade. Se eu fizesse correndo, tudo sairia RIDÍCULO e de má qualidade... 

Mas tomara que em breve eu volte a postar pelo menos com um pouquinho mais de frequência!! =D

De todos os sites de contadores que existem na Internet, para mim, o melhor é este (http://contador.s12.com.br/). Pois ele tem a maior quantidade de modelos de contadores na web, e alem disso tudo, é grátis.

Clique aqui para entrar no site 
No site você encontrará mais de 30 modelos para escolher a vontade. Você deve escolher o modelo que mais combina com você, aquele que você mais gostar.
Eu gostei mais deste, por isso vou escolher este aqui: 
Selecionado o modelo de sua escolha, clique no botão "Criar Contador!" que se localiza centralizado na parte inferior do site (lá embaixo do site).
Ao clicar no botão, o seu novo contador será criado. Ele estará ali, em HTML, basta você copiar e colocar em qualquer pagina que aceita HTML. 



O HTML que aparecerá para você, será muito parecido com este que apareceu para mim:
&lt;div align=center&gt;
&lt;a href="http://www.bravoxnet.com.br" style="font:Arial;font-size:9px;color:#999999;text-decoration:none;" target="_blank"&gt;Voip&lt;/a&gt;&lt;br&gt;&lt;a href="http://contador.s12.com.br" target="_blank"&gt;&lt;img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"&gt;&lt;/a&gt;
&lt;/div&gt;
Usando o HTML que foi gerado (sem alterar nada), ele ficaria assim:Voip

Percebe-se que no código que é gerado, vem com  um anuncio. Suponho que este anuncio é gerado pois os donos do site  gerador de contadores, ganham um dinheiro por cada clique nestes anuncio  (suponho). É meio difícil de entender como isso pode acontecer; mas  acontece.
Este anuncio já estava naquele código HTML que copiamos. Mas imagina o contador em sua pagina, com aquele anuncio que não tem nada haver.Fica feio não é? - Então vamos tirar! 
Para podermos entender o que estamos fazendo, vamos interpretar este código:&lt;div align=center&gt;
&lt;a href="http://www.bravoxnet.com.br" style="font:Arial;font-size:9px;color:#999999;text-decoration:none;" target="_blank"&gt;Voip&lt;/a&gt;&lt;br&gt;&lt;a href="http://contador.s12.com.br" target="_blank"&gt;&lt;img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"&gt;&lt;/a&gt;
&lt;/div&gt;

██ : HTML para centralizar texto. (opcional)██ : HTML para link. No caso o link é para o anuncio.██ : Endereço do link do anuncio.██ : Anuncio.██ : HTML para quebra de linha. (Pular uma linha)
██ : HTML para link. No caso para o site de onde o contador foi tirado.
██ : Endereço do link do site de onde o contador foi tirado. ██ : HTML para a imagem do contador.██: Endereço da imagem do contador.* Tudo que está em itálico é o estilo do link / fonte / imagem / titulo / etc.

Se você tem uma noção básica de HTML, com a legenda acima você já conseguiria remover o anuncio. Mas para você que não conhece HTML, faça o que eu digo! =)
Apague todo HTML para o link do anuncio (tudo que está desta cor ██ ) e o endereço do link do anuncio (tudo que está desta cor ██)

Nosso código ficou assim:&nbsp;&lt;div align=center&gt;
Voip&lt;br&gt;&lt;a href="http://contador.s12.com.br" target="_blank"&gt;&lt;img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"&gt;&lt;/a&gt;
&lt;/div&gt;

* A legenda para as cores ainda é a mesma.
Com o código acima (sem o link do anuncio) teríamos o nosso contador assim:Voip

Já da pra perceber que estamos quase lá, não é verdade?Agora só falta você apagar o anuncio (que está desta cor ██ )

Nosso código ficou assim: &lt;div align=center&gt;
&lt;br&gt;&lt;a href="http://contador.s12.com.br" target="_blank"&gt;&lt;img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"&gt;&lt;/a&gt;
&lt;/div&gt;

* A legenda para as cores ainda é a mesma. 
Nosso contador ficará deste jeito com o HTML acima:

Já apagamos tudo, e sabemos que o &lt;br&gt; serve apenas para fazer uma quebra de linha. Então é claro que podemos apagar ele. Mas cuidado para não apagar nada alem do &lt;br&gt;.

Seu contador está pronto. Mas...Se você reparar, a imagem do contador (onde estão os números) está "linkada" (tem um link). Este link é para o site de onde tiramos o contador. Observando nossa legenda podemos ver isto (veja legenda lá em cima) (HTML para link do site do contador: tudo que está nesta cor ██ ). Podemos alterar o endereço do link apenas trocando o endereço (tudo que está nesta cor ██ ) Por exemplo:

&lt;div align=center&gt;
&lt;a href="http://blogdovitorfarias.blogspot.com" target="_blank"&gt;&lt;img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"&gt;&lt;/a&gt;
&lt;/div&gt;


* A legenda para as cores ainda é a mesma. 
Nosso contador ficará deste jeito com o HTML acima:


Ou então podemos remover o link, deixando apenas a imagem do nosso contador sem links.O código ficaria assim:&lt;div align=center&gt;
&lt;img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"&gt;
&lt;/div&gt;

&nbsp;██ : Titulo.&nbsp;&nbsp;██ : HTML para o titulo.
* Adicionei mais duas legendas.
* A  legenda para as cores ainda é a mesma. 
Mas se você colocar o mouse em cima do contador e esperar um pouco, aparecerá escrito "Contador". Para mudar esta mensagem, substitua a palavra contador (que está escrito desta cor ██), pela palavra que você quiser.

Se você quiser remover esta mensagem apague o HTML para o titulo (tudo que esta desta cor&nbsp; ██ ) e apague também o titulo (que está escrito desta cor&nbsp; ██ ).


Seu código deverá ficar assim:&lt;div align=center&gt;
&lt;img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" border="0"&gt;
&lt;/div&gt;

* A   legenda para as cores ainda é a mesma.&nbsp;
Nosso contador ficará deste jeito com o HTML acima:

Ou seja, a única coisa que precisamos para ter nosso contador, é o HTML para a imagem do contador (que está desta cor ██ ) e o link da imagem do contador (que está desta cor ██ ).

* O border="0" é apenas para que a imagem não fique com uma bordar "enfeiando" o contador. 
* O div align="center" é apenas para que o contador fique centralizado (no meio).

Para que você não tenha duvida de que só precisamos da imagem, experiente pegar o link da imagem, e ficar atualizando. O resultado é que a imagem sempre vai mudar de numero, mas o link permanecerá o mesmo.


Para colocar o contador de acessos no orkut, depois que ja tiver editado todo HTML do contador. Faça aquela mesma coisa de desativar HTML, colocar o código, reativar o HTML, e depois colar no perfil. Se não conseuiu entender, veja o fim do artigo HTML básico para orkut.


* Não encontrei no site  do contador (http://contador.s12.com.br/),  nenhum termo de uso que diga que não podemos remover os anúncios nem o  link do site do contador. Mas mesmo assim, é bom deixar o link do site  que fez seu contador, pois não é bom usar algo que não foi feito por  você, sem dar pelo menos um crédito.

Está tendo problemas em alguma parte? Não conseguiu entender como colocar o contador? Perguntas, criticas, comentários e elogios são sempre bem vindos!!Deixe o seu aqui!!


Não é proibida a cópia deste  artigo, contanto que a fonte (Blog do Vitor Farias) seja citada.