How to make Post Views Counter in Blogger Posts [100% Working Update]

  • Join us to download any resource for free. You will be able to download or guest post.
    Sign Up Now

kashif

Administrator
Staff member
VIP Member
Apr 12, 2022
5,431
207
63
Pakistan
www.vuinsider.com
Hi guys! Hope you are good and doing some great stuff too. We hope you liked our previous article because this time, I came up with How to add Post Views Counter in Blogger Posts.

How to make Post Views Counter in Blogger Posts

We often see people searching about How to add Post Views Counter in Blogger Posts but due to a lack of correct solutions on the internet, they end up with disappointment. Blogger has a built-in counter but it's not "Post Views", it is "(Total) Page Views". I have also been in this situation for more than a year until now. I found something that's working nicely as I want and thought I would share my hard search with you.

How to add Post Views Counter in Blogger Posts​

Please follow these steps carefully to get the correct final results but first create a backup file for your theme.

Step 1 - Create a Firebase Account​

The first thing you have to do is create a firebase account. If you already have then let's go to the next step. *Make sure you are on this URL: https://console.firebase.google.com/project/_/firestore~2Fdata

Step 2 - Create a New Project​

After logging in, create a new project by following these instructions;

Click on "add project"
Enter a project name and continue until the project is created. You will enter the project automatically.


Expand the sidebar.



Select "Realtime Database"



Create new Database



Select "test mode" and click "Enable"



Update the Rules of the database by replacing them with the below code.
JavaScript:
{
  "rules": {
    ".read": true,
    ".write": true,
  }
}




Get the project id from "setting > project setting"



Congratulations! You have successfully created a WORKING Database for How to make Post Views Counter in Blogger Posts.

NOTE! If the above ID does not work then try copying from here. This will definitely work for you.


Step 3 - Installing Scripts​

After successfully firebase project creation, we will enter the final step of adding HTML, CSS & JavaScript codes in blogger.

Login to Blogger.com and navigate to "Theme".
>
Click the arrow icon near "CUSTOMIZE"
>
Click "Edit HTML"

Put the following code just before the "/head" tag.

HTML:
<!-- Jquery Library and Font Awesome CDN -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css' integrity='sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=' rel='stylesheet'/>

And put the following code just before the "/body" tag.

HTML:
<!-- Start Post Views Script by VUInsider.com -->
<script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'/>
<script>//<![CDATA[
(jQuery);$.each($(".post-view[data-id]"),function(c,f){var b=$(f).parent().find("#postviews").addClass("view-load"),d=new Firebase("https://fir-vuinsider.firebaseio.com/pages/id/"+$(f).attr("data-id"));d.once("value",function(e){var a=e.val(),g=!1;null==a&&(a={},a.value=0,a.url=window.location.href,a.id=$(f).attr("data-id"),g=!0),b.removeClass("view-load").text(a.value),a.value++,"/"!=window.location.pathname&&(g?d.set(a):d.child("value").set(a.value))})});
//]]></script>
<!-- End Post Views Script by VUInsider.com -->

*Find and replace it with your firebase project id URL. Make sure of doing it as it is the VERY important part.

Now, the last thing is to put the following code inside the post container where you want to show your post views count.

HTML:
<span class='post-view' expr:data-id='data:post.id'><span class='view-load' id='postviews'><i class='fas fa-spinner fa-pulse faa-fast'/></span> Views</span>

So, this is it from How to make Post Views Counter in Blogger Posts. If you have any questions about it then comment below. We will gladly take the time to help you.

Also, check Top 3 Ad Networks For Small Publishers.
 
Last edited:
  • Like
Reactions: LiMA

kashif

Administrator
Staff member
VIP Member
Apr 12, 2022
5,431
207
63
Pakistan
www.vuinsider.com
  • Like
Reactions: LiMA

LiMA

New member
Jul 8, 2022
4
0
1
Hi guys! Hope you are good and doing some great stuff too. We hope you liked our previous article because this time, I came up with How to add Post Views Counter in Blogger Posts.

How to make Post Views Counter in Blogger Posts

We often see people searching about How to add Post Views Counter in Blogger Posts but due to a lack of correct solutions on the internet, they end up with disappointment. Blogger has a built-in counter but it's not "Post Views", it is "(Total) Page Views". I have also been in this situation for more than a year until now. I found something that's working nicely as I want and thought I would share my hard search with you.

How to add Post Views Counter in Blogger Posts​

Please follow these steps carefully to get the correct final results but first create a backup file for your theme.

Step 1 - Create a Firebase Account​

The first thing you have to do is create a firebase account. If you already have then let's go to the next step. *Make sure you are on this URL: https://console.firebase.google.com/project/_/firestore~2Fdata

Step 2 - Create a New Project​

After logging in, create a new project by following these instructions;

Click on "add project"
Enter a project name and continue until the project is created. You will enter the project automatically.


Expand the sidebar.



Select "Realtime Database"



Create new Database



Select "test mode" and click "Enable"



Update the Rules of the database by replacing them with the below code.
JavaScript:
{
  "rules": {
    ".read": true,
    ".write": true,
  }
}




Get the project id from "setting > project setting"



Congratulations! You have successfully created a WORKING Database for How to make Post Views Counter in Blogger Posts.

NOTE! If the above ID does not work then try copying from here. This will definitely work for you.


Step 3 - Installing Scripts​

After successfully firebase project creation, we will enter the final step of adding HTML, CSS & JavaScript codes in blogger.

Login to Blogger.com and navigate to "Theme".
>
Click the arrow icon near "CUSTOMIZE"
>
Click "Edit HTML"

Put the following code just before the "/head" tag.

HTML:
<!-- Jquery Library and Font Awesome CDN -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css' integrity='sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=' rel='stylesheet'/>

And put the following code just before the "/body" tag.

HTML:
<!-- Start Post Views Script by VUInsider.com -->
<script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'/>
<script>//<![CDATA[
(jQuery);$.each($(".post-view[data-id]"),function(c,f){var b=$(f).parent().find("#postviews").addClass("view-load"),d=new Firebase("https://fir-vuinsider.firebaseio.com/pages/id/"+$(f).attr("data-id"));d.once("value",function(e){var a=e.val(),g=!1;null==a&&(a={},a.value=0,a.url=window.location.href,a.id=$(f).attr("data-id"),g=!0),b.removeClass("view-load").text(a.value),a.value++,"/"!=window.location.pathname&&(g?d.set(a):d.child("value").set(a.value))})});
//]]></script>
<!-- End Post Views Script by VUInsider.com -->

*Find and replace it with your firebase project id URL. Make sure of doing it as it is the VERY important part.

Now, the last thing is to put the following code inside the post container where you want to show your post views count.

HTML:
<span class='post-view' expr:data-id='data:post.id'><span class='view-load' id='postviews'><i class='fas fa-spinner fa-pulse faa-fast'/></span> Views</span>

So, this is it from How to make Post Views Counter in Blogger Posts. If you have any questions about it then comment below. We will gladly take the time to help you.

laxmipackers
The counter font is different from the default to my site, is there anyway to correct it?
My site exemple:https://www.thepointcentral.com/202...tch-notes-new-multiplayer-mode-wolf-pack.html
 

kashif

Administrator
Staff member
VIP Member
Apr 12, 2022
5,431
207
63
Pakistan
www.vuinsider.com
  • Like
Reactions: LiMA

Similar threads

About us

  • Our community has been around from 2017 and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. Providing Free Resources to help newcomers/startups. We are working every day to make sure our community is one of the best.

Quick Navigation

User Menu

AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock