.

quarta-feira

Contador de Visualizações de Página

ACESSOS:
AQUI

Nesta postagem compartilho com vocês algo que será muito útil tanto para os visitantes do seu site/blog quanto para você mesmo (administrador). Geralmente, só quem é administrador de um blog/site sabe o número de cada visualização de cada visualização de cada postagem. Mas, com esse código, o seu blog ficará com um design mais profissional do que nunca!!!

Você pode ver esse código em funcionamento aqui no site DicasHot mesmo... Veja que ACIMA você o número de visualizações desta página mesmo. Enfim.

Primeiramente você vai criar uma conta no site Firebase.com/.

Depois você vai entender o por quê.

Para criar a conta no site Firebase, não tem segredo nenhum...

Sugiro que: para que a sua URL fique "certa", coloque o nome do seu blog em vez do seu nome. (como na imagem abaixo)



Tendo criado a sua conta, provavelmente irá aparecer assim:



Você vai clicar no nome do seu blog que irá aparecer. 
Você será redirecionado para uma página estatística. Não mexa nela!!! Apenas copie a URL da página.




Tendo copiado a sua URL. Finalizamos essa parte.

A sua URL tem que ter ficado: 

https://nome-do-seu-blog.firebaseio.com



Agora, vá até o painel do seu blog, entre em "Modelo" - "Editar HTML" e procure pela tag
]]></b:skin>
Tendo encontrado a tag, cole ACIMA dela o seguinte código

/*-------- Contador de Visualizações de Página by MBT e DicasHot ----------*/ 
#views-container { 
width: 85px; 
float: right; 
}
.mbtloading { 
background: url('http://4.bp.blogspot.com/-PZMStRDcchY/USOp3xFp4yI/AAAAAAAAJOo/rm5FSsaSKh0/s320/mbtloading.gif') no-repeat left center; 
width: 16px; 
height: 16px; 
}
.viewscount { 
float: right; 
color: #EE5D06; 
font: bold italic 14px arial; 
}
.views-text { 
float: left; 
font: bold 12px arial; 
color: #333; 
}
.views-icon{ 
background: url('http://4.bp.blogspot.com/-_dXedKDHIws/USOp369zEPI/AAAAAAAAJOs/Cv3fTZUaBTU/s1600/postviews.png') no-repeat left; 
border: 0px; 
display: block; 
width: 16px; 
height: 16px; 
float: left; 
padding: 0px 2px; 
}
Agora, procure pela tag

</body>
Tendo encontrado, cole ACIMA dela o seguinte código

<!-- Post Views Script by MBT --> 
<script type='text/javascript'> 
    window.setTimeout(function() { 
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;); 
      }, 10); 
  </script> 
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/> 
<script> 
$.each($(&#39;a[name]&#39;), function(i, e) { 
var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;mbtloading&#39;); 
var blogStats = new Firebase(&quot;https://dicashot.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;)); 
blogStats.once(&#39;value&#39;, function(snapshot) { 
var data = snapshot.val(); 
var isnew = false; 
if(data == null) { 
data= {}; 
data.value = 0; 
data.url = window.location.href; 
data.id = $(e).attr(&#39;name&#39;); 
isnew = true; 
} 
elem.removeClass(&#39;mbtloading&#39;).text(data.value); 
data.value++; 
if(window.location.pathname!=&#39;/&#39;) 
{ 
if(isnew) 
blogStats.set(data); 
else 
blogStats.child(&#39;value&#39;).set(data.value); 
} 
}); 
}); 
</script>
E é aqui que entra a sua URL firebaseio. Cole a sua URL Baseio na parte destacada de vermelho.

Agora, procure pela tag

<head>
ABAIXO dela cole o seguinte código
<script src='https://cdn.firebase.com/v0/firebase.js'/>
Agora, procure pela tag
<div class='post-header-line-1'/>
Tendo encontrado esta tag, cole ABAIXO dela o seguinte código
<!-- Contador de Visualizações de Página by MBT e DicasHot --> 
<div id='views-container'><span class='views-icon'/><div class='views-text'>Cliques:</div> <div class='mbtloading viewscount' id='postviews'/></div>
Tendo feito isto, está pronto!!!

Qualquer dúvida, não deixe de perguntar.