Join our official Telegram Group to get daily updates. Join Now

How to Add Post Views Counter in Blogger

How to Add Post Views Counter in Blogger

If you are searching for How to Add Post Views Counter in Blogger then your are at the right place. Today in this article I'm going to guide you step by step to Add Views Count in the Blogger. So, follow the easy steps and learn more about 'How to Add Post Views Counter in Blogger.'

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 for them.

Steps to Add Post Views Count

There are only three simple steps to add post view counter in blogger. All the steps are explained very well below. Please follow the steps carefully because if there is even a slight error the post view counter will not work.

Step 1. Adding jQuery & Font Awesome

Note: This is an optional step, if Font Awesome & jQuery is already installed on your blog then don't add these codes to your blog.

Look for the code <head> on your blog and place the following code just after the code <head> :


<!-- 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'/>

Step 2. Adding JavaScript

Now search the code </body> and paste the following codes above it.


<script type='text/javascript'> 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://post-view-st.firebaseio.com/pages/id/"+$(a).attr("data-id"));t.once("value",function(e){var o=e.val(),d=!1;null==o&amp;&amp;((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&amp;&amp;(d?t.set(o):t.child("value").set(o.value))})})}); </script>

Step 3. Adding HTML Codes

Add the following codes above to <data:post.body/>.

There may be more than one <data:post.body/> code in the template, so please try one by one and see if its working.


<b:if cond='data:view.isPost'><span class='post-view' expr:data-id='data:post.id'><i class="fa fa-eye" aria-hidden="true"></i> <span class='view-load' id='postviews'><i class='fas fa-spinner fa-pulse faa-fast'/></span> Views</span></b:if>

This is all about adding post views counter in blogger. I hope this article is very helpful for you. If something isn't clear or have any question, let us know in the comments.

© Copyright ASThemesWorld

4 comments

  1. its working bro 100%. thanks for serving my time
    1. Welcome bro.. 😊
  2. Nice post bro
    1. Thanks bro...