Personalizar Contador de Visitas - Contador com Outra Imagem

Como colocar um contador de visitas dentro de outra imagem, essa foi uma pergunta que recebemos por e-mail e achei bem interessante a idéia. No site que enviaram como exemplo ele colocou o contador de visitantes online dentro de outro banner e o efeito visual ficou muito bom como podem ver na imagem mais abaixo.

Fazer isso não é tão difícil apenas precisa de um código CSS simples para posicionar a imagem de fundo e o contador no lugar certo. O primeiro passo é criar e hospedar uma imagem, depois pegue o endereço da imagem (....). E também criar ou copiar o código do contador que deseja incluir nesta imagem, isso pode ser feito com qualquer contador ou imagem.


Imagem do site GeraLigado
Agora veja esse código e substitua o endereço da imagem pela aquela que hospedou e o código do contador:

<div style="background:url(endereço da imagem) left no-repeat; height: 100px; width: 256px;"><div style='float:left; padding-top:68px; padding-left:155px;'>código do contador de visitas</div></div>

Vamos ver os outros ajustes necessários no código:

height: 100px; width: 256px; nesta parte coloque a altura (height) e largura (width) da imagem que hospedou, tem que ser os valores exatos.

Em outra parte temos: padding-top:68px; padding-left:155px; isso é o posicionamento do contador então altere os valores até conseguir a posição desejada, os números são margens na seguinte ordem: 68(acima), 155(esquerda).

Sabemos que acertar o posicionamento é uma coisa meio chata de fazer, mas não tem outro jeito só fazendo testes com os valores até chegar ao local correto.