How to Display Post Views Count in Blogger

How to Display Post Views Count in Blogger

Post Viewer Counter for Blogger Post, Views, Post viewer used to show the post view to the audience. Post viewer is a really great widget for the blog

If you want to keep track of your posts or you want to know if your website has anyone interacting with it? The simplest way is to integrate the article with the view checking feature, so you will easily know the number of views on each blog post on your blogger website. Using this feature, readers can determine the quality of the article thanks to the number of views and they will feel more secure and want to click to the blog post to read when the number of views is higher than the others. So, in this article, I will guide you how to count post views in blogger. Now, let’s take a look.

{tocmero} $title={Table of Contents}

Creating your Firebase Account

  1. Signup to Firebase
  2. *You will be redirected to your dashboard once you successfully signed up

  3. Then, create your Firebase APP. To create your Firebase APP Go to

  4. Click on Create Project button.

  5. Type your Project Name ( You can type your website's name as your project name).
  6. Accept Firebase Terms. Then, click on Continue button.

  7. Click on Continue button.

  8. Accept Google Analytics Terms. Then, click on Create project button. Firebase will be create your project.

  9. When your project is ready click on Continue button.

  10. Click on the Build menu on lefthand side.

  11. Click on the Realtime Database menu button.

  12. To store and sync data in real time you have to create to realtime database. Click on the Create Database button to create your firebase realtime database.

  13. Now setup your Database Database Option - Select your Realtime Database location, where your Realtime Database will be stored. Then, click on the Next.

  14. Security Rules - Select Start in Locked mode. Then enable by clicking Enable button. Oonce you havedefined your data structure you will have to write rules to secure your data.

  15. Firebase App URL created. Congratulations! You have successfully created a WORKING Database.

  16. Click on Rules menu.

  17. You have to change read and write rules.

  18. Change read and write rules : false to true.

  19. Then, Publish changes rules.
  20. *Don't forget to copy your Firebase App URL. Return to Blogger.

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

  21. Go to Blogger » Template » Backup your Template » and Edit HTML
  22. Add FontAwesome before </header>.
  23. <link crossorigin='anonymous' href='' integrity='sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=' rel='stylesheet'/>
  24. Add Jquery Library v1.2.3 or higher before </header>.
  25. <script src=''/>
  26. Copy this code then paste it before <data:post.body/> *or anywhere you'd like it to appear inside your Blog Post.
    <a expr:name=''/> <i class='fa fa-eye'/> <span id='postviews'/> Views 
  28. JavaScript - Find (ctrl+f) </body>. Copy the following code and paste it before </body>.
    <script src='' type='text/javascript'/> 
    $.each($(&#39;a[name]&#39;), function(i, e) { 
    var elem = $(e).parent().find(&#39;#postviews&#39;); 
    var blogStats = new Firebase(&quot;; + $(e).attr(&#39;name&#39;)); 
    blogStats.once(&#39;value&#39;, function(snapshot) { 
    var data = snapshot.val(); 
    var isnew = false; 
    if(data == null) { 
    data= {}; 
    data.value = 0; 
    data.url = window.location.href; = $(e).attr(&#39;name&#39;); 
    isnew = true; 
  30. Replace YOUR-APP-NAME with your Firebase App URL. Save your template.

Congratulations! Now your Post Views Count in Blogger posts has been added.

Mero Blogging Tips

Mero Blogging Tips Share Blogger Tutorials, HTML, JavaScript, CSS, Widget, SEO, jQuery, Web Tool and General Helpful Stuff for Newbie Bloggers and Readers.


First of all, thank you for taking the time to read my blog. It's much appreciated! If you would like to leave a comment, please do, I'd love to hear what you think!. Suggestions and/or questions are always welcome, either post them in the comment form.

However, comments are always reviewed and it may take some time to appear. Also, Comments without NAME will not be published. Always keep in mind "URL without nofollow tag" will consider as a spam.

Previous Post Next Post

Contact Form