How to add post views counter on blogger blog posts

Do you know why the post viewer is essential on a blogger blog? There is much importance of a post view counter because it shows your post view to others.

If you want to show post view on WordPress, it's effortless to get so many plugins for adding post views counter. It easily possible on WordPress because you get database access on WordPress, but if you want to install a post views counter, then maybe 90% of people say it's not possible, but you can do this by using google firebase.

So let's see how you can add a post views counter on blogger. We are adding the post views country in just some simple steps to blow from the below article.

Why post views counter is necessary

Are you know there are so many factors that tell the article is a good quality full or not, post views are one of them. If you want to see your post views directly from your blog then it's the best way for you. 

How to show post views on blogger

For showing post views you must need to follow some steps. Go to your blogger dashboard then come to the theme section after that search for <data:post.body/> then add the below code after this tag (you may see this tag more than 1 time on your theme so try by adding the below code one by one)

<style>#views-container #page-views{margin-left:5px}</style>
<span id="views-container"><i class="fa fa-eye"></i><span id="page-views"></span></span>

Now search for <b:includable id='post' var='post'> this code after that paste the below code above this code

<div expr:post-id='data:post.id'/>

This the final step, just search for </body> tag and add the below code after this tag

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'></script>
<script>
//<![CDATA[
const convertSize=function(t){const o=["","KB","MB","GB","TB"];if(0==t)return"0";const n=parseInt(Math.floor(Math.log(t)/Math.log(1024)));return 0==n?t+" "+o[n]:(t/Math.pow(1024,n)).toFixed(1)+" "+o[n]};
$.each($('div[post-id]'), function(i, e) {
var blogStats = new Firebase("https://pageviewbytechyrel.firebaseio.com/pages/id/" + $(e).attr('post-id'));
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('post-id');
isnew = true;
}
$("#page-views").text(convertSize(data.value));
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
//]]>
</script>

Just save your theme and see the demo on your blog. If you see the eye icon is not showing then you need to install the font awesome CDN, to install font-awesome CDN just search for </head> tag then add the below lines of code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Now save your theme. After all, do just view your blog and enjoy it.

Conclosing

This a small article about how you can add post views counter on blogger blog posts. if you face any problem with any part of this article then feel free to tell me about the problem in the below comment box.