Colocando e editando um contador de acessos
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.
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

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:
<div align=center>
<a href="http://www.bravoxnet.com.br" style="font:Arial;font-size:9px;color:#999999;text-decoration:none;" target="_blank">Voip</a><br><a href="http://contador.s12.com.br" target="_blank"><img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"></a>
</div>
<a href="http://www.bravoxnet.com.br" style="font:Arial;font-size:9px;color:#999999;text-decoration:none;" target="_blank">Voip</a><br><a href="http://contador.s12.com.br" target="_blank"><img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"></a>
</div>
Usando o HTML que foi gerado (sem alterar nada), ele ficaria assim:
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:
<div align=center>
<a href="http://www.bravoxnet.com.br" style="font:Arial;font-size:9px;color:#999999;text-decoration:none;" target="_blank">Voip</a><br><a href="http://contador.s12.com.br" target="_blank"><img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"></a>
</div>
<a href="http://www.bravoxnet.com.br" style="font:Arial;font-size:9px;color:#999999;text-decoration:none;" target="_blank">Voip</a><br><a href="http://contador.s12.com.br" target="_blank"><img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"></a>
</div>
██ : 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 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:
<div align=center>
Voip<br><a href="http://contador.s12.com.br" target="_blank"><img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"></a>
</div>
Voip<br><a href="http://contador.s12.com.br" target="_blank"><img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"></a>
</div>
* A legenda para as cores ainda é a mesma.
Com o código acima (sem o link do anuncio) teríamos o nosso contador assim:
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:
<div align=center>
<br><a href="http://contador.s12.com.br" target="_blank"><img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"></a>
</div>
<br><a href="http://contador.s12.com.br" target="_blank"><img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"></a>
</div>
* A legenda para as cores ainda é a mesma.
Nosso contador ficará deste jeito com o HTML acima:
Já apagamos tudo, e sabemos que o <br> serve apenas para fazer uma quebra de linha. Então é claro que podemos apagar ele. Mas cuidado para não apagar nada alem do <br>.
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:
<div align=center>
<a href="http://blogdovitorfarias.blogspot.com" target="_blank"><img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"></a>
</div>
<a href="http://blogdovitorfarias.blogspot.com" target="_blank"><img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0"></a>
</div>
* A legenda para as cores ainda é a mesma.
Ou então podemos remover o link, deixando apenas a imagem do nosso contador sem links.
O código ficaria assim:
<div align=center>
<img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0">
</div>
<img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" alt="Contador" border="0">
</div>
██ : Titulo.
██ : 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 ██ ) e apague também o titulo (que está escrito desta cor ██ ).
Seu código deverá ficar assim:
<div align=center>
<img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" border="0">
</div>
<img src="http://contador.s12.com.br/img-aBDBDbb0-26.gif" border="0">
</div>
* A legenda para as cores ainda é a mesma.
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 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.
Eu vou ser o prmeiro a comentar, Olha gostei mas faço melhor do que isso.As pessoas que não entendem direito,não vão saber fazer então vai aprender a explicar melhor e se aperfeiçoar
Sim! Muitas pessoas fazem melhor do que isso, quando se fala em HTML. Mas meu objetivo não é ser melhor do que ninguem, e sim, passar conhecimento a quem tem interesse da melhor forma possível.
Quanto a explicação que você considerou ruim; eu sempre procurei fazer o meu melhor nas postagens, mas é claro que não somos perfeitos. Sempre estou me aperfeiçoando para fazer cada vez melhor.
não ligue eu
não sei nada de html e aprendir
isso é "gentinha" que não faz nada por ninguem e si incomoda quando os outros fazem !!!
parabens
Gostei muito desse tutorial.Continua assim ajudando os outros pois Deus gosta disso.Deus gosta que todos ajudem um ao outro.
Amigo vlw pelo tutorial e abraços!
coloquei so que fica na atualizaçao queria que ficasse do lado...como faço? de ja agradeço
ai entra no meu blog ai demilovatoparaosfas.blogspot.com
fodaaaaaaaaaa vitaao '-'
Eu entendi o que quis fazer, você quer tipo estruturar as pessoas para quando elas tiverem o conteúdo de HTML em mente saberem fazer tudo organizado.
Tá legs sua explicação,
Parabéns e Joinha pra vc
Pior contador disponível atualmente é esse contador.s12.com.br, mandei 200 visualizações simultâneas por pacotes, e essse contador que tava nessa postagem com quase 3800 ficou com 15 Visualizações kkkkkkkkkk