Contador de Visualizações de Página
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.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:
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>
/*-------- Contador de Visualizações de Página by MBT e DicasHot ----------*/ #views-container { width: 85px; float: right; } .mbtloading { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN7tVXk3DmSJaGdv1-FExkoTimL6lYn85ChXBbpOBAnkxAcluN7vb3cZvhVkXdnvIQOVo0-_E0NizyneQDZPtP21xKeoUOM2HGhjmtKY8VZ01DBSEwsJaugj0pXpEsRmhZUC4WUTbysTZP/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBO4GAuV76l_HjZt5KzpWpiftxGl08RrYr3aoEea1KR7JeBB6pv9eWIyak5byju70GURKXtgoToAPaaHhLk4-lYN3O_wATgIX5fbtDuJOn-Yu8bS14y8Tl7AjVOrlLF5HhmwlNcHsyJJ6J/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('loading', '');
}, 10);
</script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews').addClass('mbtloading');
var blogStats = new Firebase("https://dicashot.firebaseio.com/pages/id/" + $(e).attr('name'));
blogStats.once('value', 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('name');
isnew = true;
}
elem.removeClass('mbtloading').text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').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
ABAIXO dela cole o seguinte código<head>
<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.
Qualquer dúvida, não deixe de perguntar.
