Bloggerbyte - How To Add Post Views Counter To Blogger- I've been looking for some articles about adding post views to bloggers and most of them aren't working. 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.
First Create a Firebase Account:
- The first thing you have to do is create a firebase account. If you already have then let's go for next step. *Make sure you are on this url:https://console.firebase.google.com/project/_/firestore~2Fdata
- Create a New Project
- Click on "add project"
- Enter project name and continue until the project is created. You will enter the project automatically.
- Select "Realtime Database"
- Create new Database
- Select "test mode" and cick "Enable
- Update Rules of database by replacing with below code.
- Get the project id from setting > project setting
After loging in, create a new project by following these instructions;
{
"rules": {
".read": true,
".write": true,
}
} 
Thats it ! You have successfully create a WORKING Datebase for How to make Post Views Counter in Blogger Posts.
The following step by step in creating a view counter on blogger:
1.Login to Blogger, Enter to THEME , Then Select Edit HTML .
2.Make sure you have installed Jquery Library and Font Awesome CDN on your blog if not then paste it just below all meta tags or just below <head> tag.
<!-- 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'/>3.Copy below code then paste it before <data:post.body/>
<b:if cond='data:view.isPost'><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></b:if>4.Paste This Script above </body> in your HTML as shown below.
<script>
/*<![CDATA[*/
/*! bloggerbyte-Firebase-post-view */
jQuery.getScript("//cdn.firebase.com/js/client/2.3.2/firebase.js").done(function(){$.each($(".post-view[data-id]"),function(e,a){var i=$(a).parent().find("#postviews").addClass("view-load"),t=new Firebase("https://md-count-view.firebaseio.com/pages/id/"+$(a).attr("data-id"));t.once("value",function(e){var o=e.val(),d=!1;null==o&&((o={}).value=0,o.url=window.location.href,o.id=$(a).attr("data-id"),d=!0),i.removeClass("view-load").text(o.value),o.value++,"/"!=window.location.pathname&&(d?t.set(o):t.child("value").set(o.value))})})});
/*]]>*/
</script>
Warning!
Please change your firebase app id with you have created.
5. If you have done above, click SAVE.
That's all this article about How to Add Post Views Counter to Blogger for those of you who are still confused or have other questions about bloggers, please comment in the comments column below this article.