How To Add Post Views Counter on Your Blogger Post

Akil Ashraful   9:16 AM   Blogging   17 comments  

 I've been looking for some articles about adding post views to bloggers and I find an easy way to do it. Example of the view counter on the blog as below or on the blog that I use this

Counter view is to display the number of views on articles. And counter view certainly has the benefit of making visitors know which articles are most viewed so they know that the article is really useful.

The following step by step in creating a view counter on blogger:

1.Go To HTML>>Template>>Edit HTML
2.Find .showAuthor in html or you can find it with CTRL+F and write . .showAuthor

3.paste the script above all .ShowAuthor as shown below

<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/> Views

4.Paste This Script above </Body> in your html as shown below

</Body><script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'></script>
<script>
$.each($("a[name]"), function(i, e) {
var elem = $(e).parent().find("#postviews");
var blogStats = new Firebase("https://YOUR-APP-NAME.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.text(data.value);
data.value++;
if(window.location.pathname!="/")
{
if(isnew)
blogStats.set(data);
else
blogStats.child("value").set(data.value);
}
});
});
</script>

5.Save the script and then you can see the result