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.

34 comentários:

  1. e um pouco complicado para acertar a posição, mas fica bem legal

    ResponderExcluir
  2. fabiano, " wesley souza, que te enviou o email "
    consegui fazer certo mas precisei fazer direto pelo template por ser uma imagem de fundo, precisei achar o Widget correto e fui ajustando, ficou muito bom e lhe agradeço, se puder de uma olhada de como ficou é o ultimo widget http://ibookis.blogspot.com
    Desde de Já Agradeço!

    ResponderExcluir
  3. Gostaria que alguém me ajudasse pois apaguei o título do meu blog quando estava mexendo no html. Gostaria de restaurará-lo. Desde já agradeço pela futura ajuda,abraços.
    Beto

    ResponderExcluir
  4. é muito bom inclusive tenho um desses la no meu blog
    se quiser conferir
    http://klebimfreitas.blogspot.com

    ResponderExcluir
  5. o trecho do titulo do blog é meio longo e pode variar um pouco, mas deve ser mais ou menos assim no seu blog:

    <b:widget id='Header1' locked='true' title='Sites Úteis e Interessantes (Cabeçalho)' type='Header'>
    <b:includable id='main'>
    <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
    <!--
    Show image as background to text. You can't really calculate the width
    reliably in JS because margins are not taken into account by any of
    clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
    width if the user is using shrink to fit.
    This results in a margin-width's worth of pixels being cropped. If the
    user is not using shrink to fit then we expand the header.
    -->
    <b:if cond='data:mobile'>
    <div id='header-inner'>
    <div class='titlewrapper' style='background: transparent'>
    <h1 class='title' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
    </h1>
    </div>
    <b:include name='description'/>
    </div>
    <b:else/>
    <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;_height: &quot; + data:height + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
    <div class='titlewrapper' style='background: transparent'>
    <h1 class='title' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
    </h1>
    </div>
    <b:include name='description'/>
    </div>
    </b:if>
    <b:else/>
    <!--Show the image only-->
    <div id='header-inner'>
    <a expr:href='data:blog.homepageUrl' style='display: block'>
    <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
    </a>
    <!--Show the description-->
    <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
    <b:include name='description'/>
    </b:if>
    </div>
    </b:if>
    <b:else/>
    <!--No header image -->
    <div id='header-inner'>
    <div class='titlewrapper'>
    <h1 class='title'>
    <b:include name='title'/>
    </h1>
    </div>
    <b:include name='description'/>
    </div>
    </b:if>
    </b:includable>
    <b:includable id='title'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
    <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
    </b:if>
    </b:includable>
    <b:includable id='description'>
    <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
    </div>
    </b:includable>
    </b:widget>
    </b:section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
    <div class='cap-left'/>
    <div class='cap-right'/>
    </div>
    </div>
    </header>

    ResponderExcluir
  6. Olá.

    como faço para deixar as partes "0 comentários", "Assinar postagens (atom)", "Postagem + antiga", etc. Queria deixar essas frezes em negrito, pois no melo blgo elas são muito clarinhas. Tem com fazer isso??

    No aguardo.....

    brigado.
    saara.

    ResponderExcluir
  7. Gostaria de agradecer aqueles que me ajudaram a reconstituir o título do meu Blog, valeu, um abraço.
    Beto RJ

    ResponderExcluir
  8. Ola, eu gostaria de saber como voce fez seu blog com o endereço "dicasparablogs.com.br" como eu tiro o blogspot, e so deixar .com ?

    Por favor, gostaria muito que me respondesse!

    ResponderExcluir
  9. Ei tenho 2 problemas ..
    o 1° é pq meu contador marca somente , mas quando eu click nele aparece a pagina com todas as visitas corretas , mas no viso do blog so aparece 1.
    O 2° é pq meu blog nun aparece de jeito nenheum nas pesquisas do google , nem se eu colocar o endereço todinho com se colocar na bara em cima , ñ encontra o meu blog , oq pode estar acontecendo nesses dois casos...agradeço se puder me ajudar.

    ResponderExcluir
  10. Lucas e Artur
    aparecer no google leva um tempo... veja em nosso menu o item mais visitas ou use a pesquisa no topo da pagina, achará varias coisas que ajudam na divulgação de blogs

    você está falando do contador do whos.amung? ele mostra o numero que pessoas que estão no site naquele momento e não o numero total de visitas.

    ResponderExcluir
  11. o contador do trendcounter é o mesmo caso, ele mostra o numero de visitantes online no site e não o numero total

    ResponderExcluir
  12. Olá pessoal, tenho de 150 a 200 visitantes por dia em meu blog mas nenhum ainda se prontificou a ser seguidor ou até mesmo um recadinho ou comentário foram feitos. Será que o meu blog está com problemas?
    fotos-streetview.blogspot.com
    Obrigado.

    ResponderExcluir
  13. você colocou o gadget de seguidores no blog... tente retirar e colocar novamente, caso tenha algum erro será corrigido

    ResponderExcluir
  14. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa



    NAO CONSEGUIR FAZER KI RAIVA!!!! ERA PARA SAIR BONITIN MAIS NAO DEU CERTO VOCÊ DEVERIA EXPLICAR MAIS MAIS EU GOSTEI DA DICA MAIS NAO ENTENDI NADA VOCÊ SABE COMO COLOCAR OS EMOTICONS EM COMENTARIOS ASSIM COMO TEM NO GERAL LIGADO?? POSTA ISSO POR FAVOR MAIS EXPLICA DIREITINN =)

    ResponderExcluir
  15. vou publicar em breve um tutorial sobre emoticons nas postagens

    ResponderExcluir
  16. Oi!
    Me ajuda?
    Gostaria de saber como coloco disponivel nas minhas postagens o dowland das atividades sugeridas?
    Obrigada, é meu primeiro blog...estou apanhando um pouco...rs...rs
    Meu e-mail: rabello.souza@gmail.com

    ResponderExcluir
  17. Oi, Fabiano!
    Eu já hospedei no 4 shared! E agora....como disponibiliso na minha postagem...
    Desculpe...
    Aproveitando como como o controlador de visitas fora do Brasil?
    Obrigada
    Patricia

    ResponderExcluir
  18. o site 4shared dá o link do arquivo para download, então é só usar o endereço no seu blog para linkar a pagina do download

    ResponderExcluir
  19. Olá.. Boa tarde!! Eu gostaria de pedir uma ajuda.. Eu consegui fazer o contador de visitas, copiei o código, mas não consigo colocar no blog.. Não sei onde colocar!! =O
    O único local que encontrei foi em gadgets, mas eles pedem um código tipo url, começando com http:// , e se eu coloco o código que copiei daqui, não é aceito... Como faço??
    Aguardo resposta.. Obrigada! ;)

    ResponderExcluir
  20. veja aqui tem varios contadores

    Usando Melhor os Contadores de Visitas

    mas o código é para colocar como um gadget de html/javascript

    ResponderExcluir
  21. Muito obrigado , ajudou, demorei um pouco pra acertar o posicionamento


    http://foiclicado.blogspot.com/

    ResponderExcluir
  22. ola pessoal hoje eu sem querer troquei meu contador de visitantes de meu blog e eu nao quero mais esse e sim o que estava antes com as visitas totais como faço patra restaurar o que estava me ajudem

    ResponderExcluir
  23. para voltar ao contador antigo tem que recolocar o código dele... não tem outra maneira

    ResponderExcluir
  24. ola! sou um pouco analfabeta em blogs, por isso paguei p personalizar o meu,só q agora quero fazer umas mudanças e n consigo,da q o blog foi personalizado e n faz.oq tenho q fazer p poder mexer ,tenho medo de perder tudo?por favor me ajude!quero mudar o layata cor dos textos coisas simples.e colocar um contador q ela n colocou!

    ResponderExcluir
  25. essas alterações de cores não são dificeis de fazer e você não perde seu conteudo.. veja na pagina design...

    sobre o contador você pode usar o do blogger clicando para adicionar um gadget ou pegar um fora do blogger, veja aqui alguns contadores:
    Usando Melhor os Contadores de Visitas

    ResponderExcluir
  26. É possível, com esse mesmo código, colocar uma imagem com link dentro de uma outra (como background)?

    ResponderExcluir
  27. Marcelo Souza
    sim, você poderia usar do jeito que falou ou até mesmo usar um texto como link

    ResponderExcluir
  28. montei meu blog todinho seguindo as dicas suas dicas da uma olhada como fico www.xofrango.blogspot.com

    eu misturei esse macete ae com o jump menu coloquei jump menu dentro de uma imagem fico legal

    ResponderExcluir
  29. Muito Bom, parabéns! Amei e estou amando as dicas!

    ResponderExcluir
  30. Eu gostaria de saber se tem como fazer isso com uma foto também, tipo ter uma foto maior como o plano de fundo e uma outra foto pequena(link) dentro dessa grande que quando clica nessa pequena redireciona para outro lugar, eu gostaria de usar no meu Orkut. Eu te mandei um email com uma explicação melhor, se puder me responder ficarei muito grata, agradeço desde já.

    ResponderExcluir
  31. esses códigos que mostramos são para blogs e não para orkut
    acredito que lá não vai funcionar

    ResponderExcluir