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

Step 1.

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.

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


<script type='text/javascript'> /*! sayemtutorial-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://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.

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


<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>
  • There is more than one <data:post. body/> code, make sure to try one by one and test to see if it works.

If something isn't clear or have any question, let us know in the comments.

Posting Komentar